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:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color
• tel

email type

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" />

url type

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" />

number type

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

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.

Date Pickers Date picker type

is used to select dates and times.

Example

Date：<input type="date" name="user_date" />

Input type for selecting date and time:

• date selects day, month, year
• month selects month, Year
• week Select week and year
• time Select time (hours and minutes)
• datetime Select time, day, month, year (UTC time, time zone)
• datetime-local Select time, day, month, year (local time)

search type

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">

color type

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">

tel type

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!