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

This article mainly introduces the relevant knowledge of "what are the new input types of HTML5". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "what are the new input types of HTML5" can help you solve the problem.

HTML 5 has several new input-side types that form the form. These new features provide a better input-side control adverbial clause: validation.

This chapter provides a comprehensive introduction to these new input types: email, URL, quantity, range, date selector (day, month, week, time, date time, local date time), search, color

Input Type-email

The email type is the input field that should contain the e-mail address. The value of the e-mail field is automatically validated when the form is submitted. Example:

Email:

Copy the code

Tip: the Safari browser in iPhone supports email input types and works with it by changing the touchscreen keyboard (adding @ and .com options).

Input Typ

-the url url type is the input field that should contain the URL address. The value of the URL field is automatically validated when the form is submitted. Example:

Home page:

Copy the code

Tip: the Safari browser in iPhone supports the url input type and works with it by changing the touchscreen keyboard (add .com option).

Input Type-number

The number type is the input field that should contain a numeric value. Limit of accepted numbers: example:

Points:

Copy the code

We usually use the following attributes to define the number type:

Attribute value description

The maximum number sets the allowable interest rate

Numerically defined allowable presets

The step number specifies the legal number interval (if step = "3", then the legal number is-3jing0pl 3pl 6, etc.)

Value figures specify preset values

Let's try an example with all the qualified attributes: give it a try yourself, and the code is as follows:

Copy the code

Tip: the Safari browser in iPhone supports numeric input types and matches it by changing the touchscreen keyboard (displaying numbers).

Input Type-ran

The range type is an input field that should contain numeric values within a certain range. Note. You can also set limits on the numbers you accept. Example:

Copy the code

We usually use the following attributes to define the number type:

Attribute value description

The maximum number sets the allowable interest rate

Numerically defined allowable presets

The step number specifies the legal number interval (if step = "3", then the legal number is-3jing0pl 3pl 6, etc.)

Value figures specify preset values

Input Type-date Selector (data detector)

HTML 5 has multiple optional new input types for date and time: date-select day, month, year-month-select month, year week-select week and year time-select time (hours and minutes) datetime-select time, day, month, year (UTC time) date time local-select time, day, month, year (local time)

The following example allows you to select a date from the calendar: instance:

Date:

Copy the code

Enter the input type "month":

Month:

Copy the code

Enter the input type "week":

Week:

Copy the code

Enter the input type "time":

Time:

Copy the code

Enter the input type "date time":

Date and time:

Copy the code

Enter the input type "datetime-local":

Date and time:

Copy the code

Input Type-search

The search type is search domain, some site search or Google search. The search field appears as a regular text field.

This is the end of the content about "what are the new input types of HTML5". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.