Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to use the new form input types in html5". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The new form input 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: windows7 system, HTML5 version, Dell G3 computer.

HTML forms are used to collect different types of user input, and elements are the most important form elements in HTML forms. Elements have many forms. According to different type attributes, type types in the original HTML form include text, password, radio, submit, and so on, and there are several new form input types in the new HTML5. These new features provide better input control and validation.

This article introduces the following new input types:

Email

Url

Number

Range

Date pickers (date,month,week,time,datetime,datetime-local)

Search

Color

Tel

Email Typ

When the type property is set to email, when the form is submitted, it automatically verifies that the value of the email field conforms to the standard format of email, and you no longer have to write your own regular expressions to verify it.

Example

Email:url Typ

When the type property is set to url, the value of the url field is automatically verified to conform to the standard format of url when the form is submitted.

Example

Linkpage:number Typ

When the type property is set to number, it automatically verifies that the input is of numeric type, and you can also set the limit of the number in the input box.

Example

Number:

Attributes for numeric qualification:

Property describes the maximum allowed by max, the minimum allowed by min, the legal numeric interval if step= "3" Then the legal number is-3, value, etc.) the default value of value specifies that the input field is disabled, the maximum character length of the input field specified by maxlength, the maximum character length of the input field specified by pattern, the pattern used to validate the input field, readonly, the value of the input field cannot be modified, the value of the input field is required, the size specifies the visible character range type of the input field.

The range type is used for input fields that should contain a range of numeric values. The range type is displayed as a slider. You can also set limits on the numbers you accept.

Example

The attributes used for numeric qualification are the same as the first four of the number type.

Date Pickers date Selector Type

Used to select a date and time.

Example

Date:

Type of input used to select date and time:

Date selects day, month and year

Month selects month and year

Week selects week and year

Time selection time (hours and minutes)

Datetime selects time, day, month and year (UTC time, sometimes zone)

Datetime-local selects time, day, month and year (local time)

Search Typ

Used for search fields, such as site search or Google search (search fields behave like regular text fields).

Example

Search Google:color Typ

When the type property is set to color, it automatically verifies that the input is in color format.

Example

Select your favorite color:tel Typ

When the type property is set to tel, it automatically verifies that the input is in phone number format.

Example

Telephone: that's all for "how to use the new form input types in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.