Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the new Input types in HTML5

2025-02-04 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly shows you "what are the new Input types in HTML5", which is easy to understand and well organized. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what are the new Input types in HTML5".

Inpute type: color

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

Optional tutorials (such as Zhihui. Com) choose your favorite color:

Input type: date

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

Optional tutorial (such as Zhihui .com) birthday:

Input type: datetime

The datetime type allows you to select a date (UTC time)

Optional tutorials (such as Zhihui .com) birthday (date and time):

Input type: datetime-local

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

Optional tutorials (such as Zhihui .com) birthday (date and time):

Input type: email

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

Optional tutorials (such as Zhihui. Com) E-mail:

Input type: month

The month type allows you to select a month

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:

Define a numeric input field (qualified):

Quantity (between 1 and 5):

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

Attribute description disabled specifies that the input field is disabled, maxlength specifies the maximum character length allowed in the input field, min specifies the minimum value allowed in 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 number of characters visible in the input field, step specifies the legal numeric interval value of the input field, specifies the default Input type of the input field: 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.

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.

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

Search Google: Input type: tel definition input phone number field:

Phone number: Input Type: time

The time type allows you to choose a time.

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.

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.

Define week and year (no time zone):

Select 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.

The above is all the content of the article "what are the new 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report