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

This article mainly shows you "how to use Input types in HTML5". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to use Input types in HTML5".

New input type:

1.color

2.date

3.datetime

4.datetime-local

5.email

6.month

7.number

8.range

9.search

10.tel

11.time

12.url

13.week

Note: not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.

Input type: color

The color type used in the input field is mainly used to select colors, as shown below:

Example

Select a color from the Color Picker:

Choose the color you like:

Input type: date

The date type allows you to select a date from a date selector.

Example

Define a time controller:

Birthday:

Input type: datetime

Datetime type allows you to select a date (UTC time).

Example

Define a date and time controller (local time):

Birthday (date and time):

Input type: datetime-local

The datetime-local type allows you to select a date and time (no time zone).

Example

Define a date and time (no time zone):

Birthday (date and time):

Input type: email

The email type is used for input fields that should contain e-mail addresses.

Example

When the form is submitted, it automatically verifies that the value of the email field is valid:

E-mail:

Tip: Safari browsers in iPhone support the email input type and match it by changing the touchscreen keyboard (adding @ and .com options).

Input type: month

The month type allows you to select a month.

Example

Define month and year (no time zone):

Birthday (month and year):

Input type: number

The number type is used for input fields that should contain numeric values.

You can also set limits on the numbers you accept:

Example

Define a numeric input field (qualified):

Quantity (between 1 and 5):

Use the following properties to specify the qualification of the number type:

Max- specifies the maximum allowable value

Min-specifies the minimum allowed

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

Value-specify default values

Try an example with all the qualified attributes.

Input type: range

The range type is used for input fields that should contain a range of numeric values.

The range type is displayed as a slider.

Example

Define a value that does not need to be very precise (similar to slider control):

Use the following properties to specify the qualification of the number type:

Max-specifies the maximum allowed

Min-specifies the minimum allowed

Step-specify a legal number interval

Value-specify default values

Input type: search

The search type is used to search for domains, such as site search or Google search.

Example

Define a search field (similar to site search or Google search):

Search Google:

Input type: tel

Example

Define the input phone number field:

Telephone number:

Input type: time

The time type allows you to choose a time.

Example

Define an input time controller (no time zone):

Select time:

Input type: url

The url type is used for input fields that should contain URL addresses.

The value of the url field is automatically validated when the form is submitted.

Example

Define the input URL field:

Add your home page:

Tip: Safari browsers in iPhone support the url input type and match it by changing the touchscreen keyboard (add .com option).

Input type: week

The week type allows you to choose the week and year.

Example

Define week and year (no time zone):

Selection week: the above is all the content of the article "how to use Input types in HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.