Introduction and example of new features of HTML5 forms-

I. Preface I mentioned the fact that HTML5 form features were introduced in the article "28 HTML5 features, tips, and technologies you must know" last year. However, I'm sorry, this section is presented as a video. In fact, the video is okay. The key is the TouTuBe video ...,. I. Preface

In fact, the HTML5 form features were introduced in the article "28 HTML5 features, tips, and technologies you must know" last year. However, it is a pity that, this section is presented in the form of a video. In fact, the video is okay. The key is the TouTuBe video, which requires jailbreak watching. Well, well-managed people like me, except for the flight attendant, are too lazy to fan the wall in other cases. Therefore, the content displayed in this part of the video is actually "empty ".

Therefore, install a patch to complete this part. The general content of this article includes:
#
#
#And other time selector controls
#Color selector
#
#Element and list attribute

# Relationship between HTML5 Form Verification and CSS3

Ii. New Features of HTML5 forms

Ii. New Features of HTML5 forms

1. type = number

The HTML form element of type = number allows you to change the value in the text box by pressing a key. This effect is often seen in the window system, for example:

A lazy person would rather lie in a chair with a few mouse clicks than sit up and press the keyboard. Therefore, compared with keyboard input, clicking input also has a market. This is why there is a Value Selection Control in the HTML5 form.

The rough HTML code is as follows:

Number of students:
If a proper Width limit is added, the effect in Chrome is as follows (UI is estimated to be related to the system topic:

Currently, the supported browsers are Opera 11, but the buttons for increasing or decreasing values in Opera are somewhat different and abstract.

Click here: nubmer control demo of HTML5 form

2. type = range
Range indicates the range of the value range in Chinese. This type of effect is also common in the window system, as shown below:

HTML5 has an input control with similar effects. You only need to define its type as range, so easy!

Drag range:
The default value range is 0 ~ 100, so, value = 50, the drag is in the middle of the area range. As shown in:

My current Firefox version 3.6 does not yet support this feature. However, Chrome, Opera, and Safari4 have an effect, but after all they are not the same father, so there are some differences in appearance, so we will not show these differences here.

Click here: the range control demo of HTML5 forms.

In the last article "28 HTML5 features, tips, and technologies you must know" mentioned at the beginning, that is, the superb effect of the 28th items is the effect achieved on the range control, which also involves the min, max attributes, and step attributes, it is an example worth watching and learning experience. For the demo of this instance, you can click here.

3. type = "date" and other time controls
This is the time selector control. In the future, you should choose not to toss about any js plug-in, and directly set the date attribute. Then, you can communicate code with the coffee side and the old lady sweeping the floor. Believe it or not, you can see:

Select Date:
The result is displayed in a supported browser, such as Opera:

This is not a time selector!

In addition to appearance, others are quite excited.

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

Obviously, the date type is date, the time type is select time, datetime is selected together with date and time, and week is select week, and month is selected.

I tested it. I just upgraded Safari to version 5.0 and found that operabrowser currently supports such time controls. The results are as follows:
If type = time is effective, it is similar to type = number. You can click the switch event. By default, the time is changed once every point for 1 minute. It is also effective to press the mouse long.

Select time:
Select time:

Type = week, when the mouse passes, the background color of the date of each row (representing a week) is dimmed collectively, for example:

When type = month, the background color of the entire month becomes deeper, for example:

The selected data values are as follows:

4. type = "color"
This is the color selector control, which is quite powerful. It is easy to use as follows:

Select color:
The result is as follows by default in the Opera Browser:

By default, the input control has a background with a circle color of # 34538b. Click the drop-down menu to show the result and erase the expanded web Color panel:

Click "others..." below ..." The button, result, and marker show the gorgeous color selection panel:

It's cool. The key is easy to use.

5. type = search
It is the search function. I remember when the search type input box will automatically contain a magnifier icon. However, this test did not see (is it in a dream). The UI effect of this attribute is very low-key and cold. In the webkit core browser, when there is a value, the input box will be followed by a very sexy cross sign, such:

I didn't find anything special about the others, so I should mention that. Click here: HTML5 search control demo

6. & datalist & element and list attributes
Datalist is a rare element to implement the data list drop-down effect. The UI style is somewhat similar to autocomplete.

For example:
The following HTML code:

List:
    
        
        
        
        
        
    

After the result input box gets the focus, the effect is as follows:

This attribute is a good thing. Don't go around and find it. It is only effective in the latest operabrowser. It is not clear whether other browsers will support it in the future.

Iii. HTML5 Form Verification and CSS3

Along with HTML5, the selector part of CSS3 also has some new pseudo classes, such:

• : Required and: optional indicate whether the content of the form element is optional or required.
• : Valid and: invalid indicate whether the entered data is valid or invalid. For example, the input box of the email type needs to be a valid email format.
• In-range and: out-of-range, which applies to input controls of the range type, when there is a min or max range Limit

For example, the following CSS and HTML code:

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; }

Common input box:

Email input box:

Value input box:

Take the email input box as an example. When the input text is not a valid email address, the outline of the input box will display a red alert border:

With the character input, when the mailbox is valid, the border will be red to a safe Green Border:

The verification work and related style display are completed by the browser and CSS. Ten years later, I thought about it. Wow, that's web. Everything is so beautiful.

4. Conclusion

Some other features of HTML5 forms, such as required, autofocus, placeholder, and pattern, are displayed and explained in the article "28 HTML5 features, tips, and technologies you must know, so I won't go into details here.

If you are interested in HTML5, I personally suggest you read the previous 28 articles or something. The content of this article can be said to be specific to it (other new features of HTML5 forms). The former is big-headed, and this article is a high-level soy sauce.

Finally, because HTML5 is a bit of stuff, if the browser you are working on is an Internet Explorer stream, even if you let your browser fly for a while, you will not see these remarkable results. Therefore, we recommend that you move to the latest version of modern browsers.