HTML forms are used to collect different types of user input. It is a very commonly used label and requires the cooperation of the form element
<form>
.
input 元素
.
</form>
The label contains a type attribute. According to different type attribute values, the input field has many forms (it can be a text field, a check box, a text control after a mask, a radio button, a button, etc.).
Common type attributes
| Attribute value | description |
|---|---|
| button | Define a click button (usually used in js) |
| checkbox | Define the check box. |
| file | Define input fields and "browse" button for file upload. |
| hidden | Define the input field of the cell store. |
| image | Define the submit button in the form of an image. |
| password | Define the password field. The characters in this field are masked. |
| radio | Define the reset button. The reset button will clear all data in the form. |
| submit | Define the submit button. The submit button will send the form data to the server. |
| text | Define a single-line input field in which the user can enter text. The default width is 20 characters. |
Define the reset button
<input type="reset" name="button" id="button" value="重置">
After clicking, the content in the form where the reset button is located will be reset to the default value.
HTML5 new input types
| Attribute value | Description |
|---|---|
| type=“email” | Restrict user input must be Email type |
| type=“url” | Restrict user input must be URL type |
| -type=“month”- | -Restrict user input must be of month type- |
| type="date” | Restrict user input must be date type |
| type=“time” | Restrict user input must be of time type |
| type=“number”– | -Restrict user input must be numeric type- |
| type=“tel” | mobile phone number |
| type="search” | search bar |
Note : Not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.
Differences between HTML and XHTML
In HTML, the input tag has no end tag.
In XHTML, the input tag must be closed properly.
Tips and notes : The input element is empty, it only contains tag attributes. You can use the label element to define the label of the input element