HTML 5 form new function resolution

The wheels of time roll over, the front end of the road never stop. For this front end this is a lot of expertise, any technological innovation, we must first to learn about it, such as the web world of this beautiful flowers---HTML 5. Although HTML 5 was released at the beginning, many people (including me) It's still a long way to go, but since the release, many enterprise-level Web sites have tried to use it (such as applications, such as canvas), making a big step in HTML 5, followed by IE9 release, which undoubtedly lets us see the HTML 5 is no longer far away from us.

51CTO Recommended Topics: HTML 5 Next generation Web development standards

Learn HTML more than 5 months, although it's off-line storage and canvas, such as innovative technology or a smattering of knowledge, but I still hope that what I have learned now will help more people in the front end to learn the technology that is undoubtedly a new trend. In this article, I'll give you a detailed overview of the functionality of the form in HTML 5.

One, the form structure is more free

A LABEL element in XHTML that needs to be placed in a form, such as Inpu/button/select/textarea, can be placed entirely anywhere in the page in HTML 5, and then associated with the ID value of the form that the element belongs to by adding the form property.

Like what:

 
  
 

  
   
  

  
   
  

  
   
  
...
  
   
  

  
   
  

 
  
 

ii. variety of input types (Most new types are not currently supported for all standard browsers, see the Hints in the sample demo)

Email input type

This type requires that you enter a properly formatted email address, or the browser is not allowed to submit, and an error message prompts you. This type must specify a name value in opera, otherwise no effect.

URL input type

The text field shown in the above code requires the input of a properly formatted URL address, and opera automatically adds http://at the beginning. Date-Time related input types (these are very bull X's)

This series is a cool type that completely solves the cumbersome JS Calendar control problem. But the current MS only opera/chrome new version of support, and show the effect is not the same. Number input type

This does not need to explain, requires the input of a numeric character, if not entered will throw an error.

Range input Type

This type displays a sliding block bar that can be dragged, and the drag range can be qualified by setting the Max/min/step value. When dragged, feedback is given to value.

Search input type

This type indicates that the input will be a search keyword, and a search icon can be displayed by Results=s.

Tel input type

This type requires you to enter a phone number, but in fact it does not have special validation, and is no different from the text type.

Color input type

This type of form allows the user to select a color value through the color selector and feed back into value.

Third, new form properties

Placeholder Property

This is a very useful property, eliminates the use of JS to achieve click to clear the initial value of the form. Browser support is also good, MS in addition to Firefox, other standard browsers can be very good support.

Require/pattern Property

Form validation properties, if the input value is null when the type is require, a prompt is rejected. Both of the above are true, and this is useful. And can be used for textarea and hidden/image/submit types. The pattern type is regular validation, All kinds of complex validations can be done. Both types must specify a name value in opera, otherwise no effect.

Autofocus Property

The default Focus property, which focuses on a form control, similar to the focus () of JS, when the page loads.

List Property

This property needs to be shared with the DataList property, DataList is the memory of the selection box, and the list property can customize the contents of the memory for the selection box.

Max/min/step Property

This property provides AutoComplete for the form. If the property is turned on, it can be done well automatically. In general, this property must start the AutoComplete feature of the browser.

Original link: http://mrthink.net/html5-newfeatures-form/

"Edit Recommendation"