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

This article introduces the relevant knowledge of "HTML5's Form form input type instance analysis". In the operation of the actual case, many people will encounter such a dilemma, 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!

You may already be familiar with the type attribute of the input element. This is an attribute that determines which form input will be presented to the user. If it is omitted-- or use the new input type in the old browser

Although the browser does not recognize it, it can still run: the input element will default to type= "text". This is the key to the ease of use of HTML5 forms today. If you use a new input type, such as email or search, the old browser will simply present a standard text field to the user.

Our registration form currently uses 4 of the 10 input types you are familiar with: check-box, text, password, and submit. Before HTML5, a complete list of all types is as follows:

Button 、 checkbox 、 file 、 hidden 、 image 、 password 、 radio 、 reset 、 submit 、 text .

HTML5 provides us with more data-specific user interface elements and built-in data validation for our input types. There are 13 new input types for HTML5:

Search 、 email 、 url 、 tel 、 datetime 、 date 、 month 、 week 、 time 、 datetime-local 、 number 、 range 、 color .

Let's take a closer look at these new types and learn how to use them.

Search

The search input type (type= "search") provides a search field, which is an one-line text input control that can enter one or more search terms. The specification is as follows:

The difference between text status and search status is mainly in format: the difference between the search field platform and the regular text field platform is that the search state may cause the appearance to be consistent with the platform search field, rather than a regular text field.

Many browsers style search input in the same way as the browser or operating system search box. Some browsers have added the ability to click to clear input.

Email

Specify one or more email addresses. It supports the Boolean nitrate multiple attribute, which allows multiple comma-separated email addresses.

My email address is

The default value of the step property is 1, so it is not required. The default value for the range input type is the midpoint of the roller-in other words, the minimum and maximum values

The median value between. The specification states that if the specified maximum value is less than the minimum value, the reverse rolling shaft is allowed (values from right to left, but not from left to right).

Color

The color input type (type= "color") provides the user with a color picker that returns a hexadecimal RGB color value, such as # FF3300.

If you want to use color input to provide placeholder text, indicating that you must use the hexadecimal RGB color format, and the well uses the pattern attribute to restrict it to only valid hexadecimal facial packet values, you must wait until this input type is fully supported.

We do not save the color input type in the form, but if we use this input type, we should use the following

Column code:

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.