Introduction and examples of new features of HTML5 forms

1. Preface

In fact, the form characteristics of HTML5 were introduced in the article 28 HTML5 features, tips and techniques you must know last year. However, it is a bit regrettable that the introduction of this part is displayed in the form of a video. In fact, it is okay if it is a video. The key is the TouTuBe video, which needs to be jailbreaked to watch. Well, a good citizen like me who is just a scrupulous person is too lazy to be fooled in other situations except for the flight attendant, so the content displayed in this part of the video is actually empty.

So, here is a patch to improve this part of the content. The general content of this article is:

# <input type=number />

# <input type=range />

# <input type=date /> and other time selector controls

# <input type=color /> Color selector

# <input type=search />

# <datalist> element and list attribute

# The ambiguous relationship between HTML5 form verification and CSS3

2. New features of HTML5 forms

The HTML form element with type=number allows you to change the value in the text box by pressing a key. This effect is often seen in Windows systems, such as:

Lazy people would rather lie on a chair and click the mouse than sit up and press the keyboard. Therefore, compared to keyboard input, there is also a market for clicking and input. This is why there are numerical selection controls in HTML5 forms.

The rough HTML code is as follows:

 Number of people: <input type=number value=1 />

If you add a suitable width limit for dots, the effect in Chrome (estimated UI is related to system themes) is as follows:

The browser that is currently supported is Opera 11, but the buttons that add and subtract values ​​under Opera look a bit crooked and have an abstract style.

You can click here hard: HTML5 form nubmer control demo

Range Chinese meaning value range, and this kind of effect is also common in the window system, as shown in the following screenshot:

There is an input control with similar effects in HTML5. Just define its type as range, so easy!

 Drag range: <input type=range value=50 />

By default, the value range is 0~100, so if value=50, the drag bar is in the middle of the area range. As shown in the figure below:

My Firefox is currently version 3.6 and this feature is not supported yet. However, Chrome, Opera, and Safari 4 all have effects, but they are not the same father after all, so there are some differences in appearance, so these differences will not be shown here.

You can click here hard: HTML5 form range control demo

The last item of the 28 HTML5 features, tricks and techniques mentioned at the beginning, that is, the superb effect example of the 28th item is the effect implemented on the range control, which also involves the min, max attributes, and step attributes. It is an example that is worth observing and learning. Regarding this example demo, you can click here harshly.

This is the time selector control. If you choose a long time, don’t bother with any js plug-in. Just have a date attribute, and then you can communicate with the old lady who swept the floor next to you while coffee. If you don't believe it, look:

 Select date: <input type=date value=2011-01-04 />

As a result, under supported browsers, such as Opera, the following effects are available:

This is a time selector that is not alive!

Apart from his ugly appearance, the others are quite delightful.

Time class space, not only date type, but also time type, but also datetime, week, and month.

Obviously, as the name implies, the date type is to select date, the time type is to select time, the datetime is to select date and time, and week is to select week, and month realizes to select month.

You can click here hard: HTML5 form time class space demo

I tested it and just upgraded Safari to version 5.0. I found that at present, Opera browser supports this type of time control. The effects are as follows:

When type=time, the effect is somewhat similar to type=number. You can switch events by clicking. By default, every point is once, the time is switched for 1 minute, and the mouse is long pressed and the mouse is also valid.

 Select time: <input type=time value=22:52 />

Select time:

Under type=week, when the mouse passes by, the background color of the date of each line (represents a week) will become darker collectively, as shown in the figure below:

When type=month, the background color of the whole month becomes darker, as shown in the figure below:

The data values ​​after selecting the two are as follows:

This is a color selector control, which is quite powerful. It is very simple to use, as follows:

 Select color: <input type=color value=#34538b />

The default effect in Opera browser is as follows:

The default input control has a round color background with #34538b. We click to drop down, and the result is, wipe, and expand the web color panel:

Click the button below with other... words, and as a result, the gorgeous color selection panel was expanded:

It's cool, it's very easy to use, oh hehe.

You can click here hard: HTML5 form color color selection control demo

It is the search function. I remember when I saw that the search type input box would automatically have a search magnifying glass icon. However, I didn't see this test (Is it in a dream), and the UI effect of this attribute is very low-key and cold. In the webkit core browser, when there is a value, there will be a sexy cross after the input box, as shown below:

I didn't find anything special about anything else, so I just mentioned this one. You can click here hard: HTML5 search type control demo

datalist is a very rare element that implements the data list pull-down effect, and the UI style is a bit similar to autocomplete.

To give a simple example:

The following HTML code:

 List: <input type=text list=mydata placeholder=popular movie rankings/> <datalist id=mydata> <option label=Top1 value=Let the bullets fly> <option label=Top2 value=If you are the one 2> <option label=Top3 value=Laughing Jianghu> <option label=Top4 value=Orphan of Zhao> <option label=Top5 value=The little thing about first love> </datalist>

The result is as follows after the input box gets focus:

This thing, this attribute is a good thing. Don’t walk around and find out that it only has effects under the latest Opera browser. It is unknown whether other browsers will support it in the future.

3. HTML5 form verification and CSS3

With HTML5, some new pseudo-classes have also appeared in the selector part of CSS3, such as:

• :required and : optional, refer to whether the content of the form element is optional or required
• :valid and :invalid indicate whether the filled in data is valid or invalid. For example, the input box of email type needs to be a valid email format.
• in-range and: out-of-range, which is suitable for range-type input controls when they have min or max range limitations

For example, the following CSS and HTML codes:

 input[type=text]:focus:valid,input[type=email]:focus:valid,input[type=number]:focus:in-range { outline: 2px green solid; }input[type=text]:focus:invalid,input[type=email]:focus:invalid,input[type=number]:focus:out-of-range { outline: 2px red solid; }

 <p>Normal input box: <input type=text /></p><p>Mail input box: <input type=email /></p><p>Numerical input box: <input type=number min=0 max=10 /> (0~10)</p>

Take the mail input box as an example. When the input text is not a legal mailbox, the outline of the input box will display a red warning border:

With the input of characters, when the mailbox is legal, the border red will be brushed into a safe green border:

Verification work, as well as related style display, etc. are all completed by the browser and CSS. I thought about it 10 years later, wow, that's the web, everything is so beautiful.

4. Hurry conclusion

Some other features of HTML5 forms, such as required, autofocus, placeholder, pattern, etc., have been shown and explained in the 28 HTML5 features, tips and techniques you must know, so I won't go into details here.

If you are interested in HTML5, I personally recommend reading the previous article about 28 things. The content of this article can be said to be a further improvement and supplement to a certain point (other new features of HTML5 forms). The former is a big deal, and this article is at best a high-level soy sauce.

Finally, since it's all HTML5 things, if the browser you're trying to do now is IE, even if you let your browser fly for a while, you won't see these eye-catching effects. Therefore, it is recommended to move to the latest version of modern browsers.

New form features in HTML5: http://dev.opera.com/articles/view/new-form-features-in-html5/