Home >Web Front-end >Front-end Q&A >What are the new form element types in html5
The new form element types in html5 are: 1. email type; 2. url type; 3. number type; 4. range type; 5. date selector type (date, month, week, time etc.); 6. search type; 7. color type; 8. tel type.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
HTML forms are used to collect different types of user input. In HTML forms, the element is the most important form element. Elements have many forms. According to different type attributes, the type types in the original HTML form include text, password, radio, submit, etc. In the new HTML5, there are multiple new form input types. These new features provide better input control and validation.
This article will introduce the following new form element input types:
When the type attribute is set to email, when submitting the form, it will automatically verify whether the value of the email field conforms to the standard format of email, and you no longer need to use regular expressions yourself. I went to verify the format of the email.
Example
Email：<input type="email" name="useremail" />
When the type attribute is set to url, when the form is submitted, it will automatically verify whether the value of the url field conforms to the standard format of the url.
Example
Linkpage:<input type="url" name="link_url" />
When the type attribute is set to number, it will automatically check whether the input content is of numeric type. You can also set the input box number restrictions.
Example
Number：<input type="number" name="user_num" min="1" max="10" />
For numerically qualified attributes:
| Attribute | Description |
|---|---|
| max | Specifies the maximum value allowed |
| min | Specifies the minimum value allowed |
| step | Specifies the legal number interval (if step="3", the legal number is -3,0,3,6, etc.) |
| value | Specifies the default value |
| disabled | Specifies that the input field is disabled |
| maxlength | Specifies the maximum character length of the input field |
| pattern | Specifies the pattern used to validate the input field |
| readonly | Specifies that the value of the input field cannot be modified |
| required | Specifies that the value of the input field is required |
| size | Specifies the visible characters of the input field |
range type is used for An input field that should contain numeric values within a range. Range types are displayed as sliders. You can also set limits on the numbers that are accepted.
Example
<input type="range" name="user_range" min="1" max="10" />
The attributes used for number qualification are the same as the first four of the number type.
is used to select dates and times.
Example
Date：<input type="date" name="user_date" />
Input type for selecting date and time:
is used for search fields, such as site search or Google search (search field behaves like a regular text field).
Example
Search Google:<input type="search" name="googlesearch">
When the type attribute is set to color, it will automatically check whether the input content is in color format.
Example
Select your favorite color:<input type="color" name="favcolor">
When the type attribute is set to tel, it will automatically check whether the input content is in the phone number format.
Example
Telephone:<input type="tel" name="usrtel">
Related recommendations: "html video tutorial"
The above is the detailed content of What are the new form element types in html5. For more information, please follow other related articles on the PHP Chinese website!