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:

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!