Brief introduction and example of new features of HTML5 forms

First, preface

In fact, about the form features of HTML5 early last year you must know 28 HTML5 features, tips and techniques in the article on the introduction (in the 11th), but, some regret, this part of the introduction is shown in video format, in fact, is the video is OK, the key is Toutube video, Need to jailbreak to watch. , like me so good-looking citizens, in addition to watching stewardess, other situations are not bothered to fan wall, so this part of the video display content, in fact, is an empty.

So, make a patch here and make this part of the content perfect. The general contents of this article are:
# input Type=number/
# input Type=range/
# input Type=date/and other time picker controls
# input Type=color/Color Picker
# input Type=search/
# DataList elements and List properties

# HTML5 Form verification and CSS3 relationship

Ii. new features of HTML5 forms

1. Type=number

The Type=number HTML form element allows you to change the value in the text box by pressing the key, which is often seen in the window system, such as:

Lazy people prefer to lie on a chair and click on the mouse to sit up and press the keyboard, so, compared to the keyboard input, the Click Input is also market. This is why the HTML5 has a numeric selection control in the form.

The approximate HTML code is as follows:

Size: Input type= "number" value= "1"/

If you add a point to the appropriate width limit, the effect under Chrome (the estimated UI is related to the system theme) is as follows:

Currently supported by the browser is opera 11, but opera lower and lower the value of the button is somewhat crooked melon cracked date, very abstract style.

You can simply click here: HTML5 form Nubmer Control Demo

2. Type=range
Range Chinese meaning value area, such effects are not uncommon in the window system, as follows:

HTML5 has a similar effect in the input control, as long as you define its type as range, so easy!

Drag range: Input type= "range" value= "50"/

By default, the value range is 0~100, so, value=50, the drag bar is in the middle of the zone range. As shown in the following:

My Firefox is currently in version 3.6 and this feature is not yet supported. However, Chrome,opera, and Safari4 under the effect, but after all, not the same father, so there are some differences in appearance, here will not show these differences.

You can really click here: HTML5 Form Range Control Demo

The last of the 28 HTML5 features, tricks, and techniques that you must know at the beginning of the article, that is, the superb effect of item 28th is the effect that is implemented on the range control, which also involves the Min,max property, and the Step property, is an example of a learning experience that is worth observing.

3. Type=date and other Time controls
This is the time picker control, after choosing a long time not to toss what JS plug-in, directly a date property, and then you can side and coffee side and next to sweep the old Lady Exchange code. Do not believe, you see:

Select Date: Input type= "date" value= "2011-01-04"/

Results under supported browsers, such as opera, have the following effects:

This is not berthelot off a time selector!

In addition to the appearance of some knock horrid horrible, others are quite pleasing.

The time class space is not only of date type, but also of type Datetime,week,month.

Obviously, as implies, date type is select date, Time type is selected, DateTime is selected by date time, and week is select Week, month to implement select month.

You can really click here: HTML5 form time Class space demo

I tested the fan, set up a new version of Safari to 5.0, and found that for now, the Opera browser supports this kind of time control. The results were as follows:
Type=time when the effect is similar to Type=number, you can click to switch events, the default per point once, time switch 1 minutes, the mouse long press is also valid.

Select time: Input type= "Times" value= "22:52"/

Select time:

Type=week, when the mouse passes, the date background color of each line (representing a week) is collectively dimmed, such as:

And Type=month, is the month of the background of the color depth, such as:

The data values after the two choices are as follows:

4. Type=color
This is the color picker control, which is quite giving force. The use is simple, as follows:

Choose color: Input type= "color" value= "#34538b"/

As a result, the default effect in opera browser is as follows:

The default input control has a round color of #34538b background, we click the dropdown, result, wipe, expand the web color panel:

Click below to have other ... The typeface of the button, the result, the miso, expands the gorgeous color selection panel:

Very cool, key use is very convenient, oh hehe.

You can really click here: HTML5 Form color Selection Control Demo

5. Type=search
is the search function, I remember when I see the search type of input box will automatically have the magnifying glass icon. However, this test did not see (in the Dream), the UI effect of this property is very low-key, very cold. In the WebKit Core browser, when there is a value, there will be a gradient of a very sexy fork in the back of the input box, such as:

I didn't find anything special about it, so that's the point. You can really click here: HTML5 Search Type Control Demo

6. DataList Elements and List properties
DataList is a very rare element that implements the drop-down effect of the data list, and the UI style is somewhat similar to the AutoComplete.

To give a simple example:
The following HTML code:

List: input type= "text" list= "MyData" placeholder= "Top movie rankings"/
DataList id= "MyData"
Option label= "TOP1" value= "Let the Bullets Fly"
Option label= "TOP2" value= "non-prudential Not Disturb 2"
Option label= "TOP3" value= "laughter"
Option label= "TOP4" value= "Orphan of Zhao"
Option label= "TOP5" value= "First love this little Thing"
/datalist

The result input box has the following effect:

This thing, this property is a good thing, do not stroll around the discovery, but also only in the latest opera browser effect, other browsers do not support later, it is unclear.

Third, HTML5 form verification and CSS3

Some new pseudo-classes are also appearing along with the selector part of HTML5,CSS3, for example:

• : Required and: optional, indicates whether the form element content is optional or required
• : Valid and: Invalid indicates whether the filled data is valid or invalid, for example, the input box of the email type needs to be a valid mailbox format
• In-range and: Out-of-range, this applies to the range type input control, when it has the Min or max range limit

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

P Normal Input box: input type= "text"//p
P Mail Input box: input type= "email"//p
P Value input Box: input type= "number" min=0 max=10/(0~10)/P

As an example of the Message entry box, when the input text is not a legitimate mailbox, the outline of the input box will display a red warning border:

With the character input, when the mailbox is legal, the border red will be brushed to become a safe green border:

The validation work, as well as the associated style display, are done by the browser and CSS. I think about 10 years later, wow, that is the web, everything is so beautiful.

Iv. Hasty Conclusion

Some of the other features of the HTML5 form, such as required, autofocus, and Placeholder,pattern, have been shown and explained in the 28 HTML5 features, tips and techniques you must know, so don't go into this.

If you are interested in HTML5, I personally suggest to look at the previous 28 what the article, the content of this article can be said to a certain point (other HTML5 form new features) further refinement and supplement. The former is a big head, this paper is at best a high-level soy sauce.

Finally, because it's all HTML5, if you're on the right now, the browser you're tossing on is ie, even if you let your browser fly for a while, you won't see the effects. Therefore, it is recommended to shift to the latest version of modern browsers.

Brief introduction and example of new features of HTML5 forms