HTML5 Study Notes (ii)--form 1

Form has always been a necessary part of the Web page, has been the role of the form has been infinitely expanded, developed a lot of novel usage, the old version of the HTML only a small subset of common forms are supported, and many new forms require CSS with the JavaScript language to build, and now HTML5 came, and she brought in new forms, these powerful forms, which could save a chunk of complex JavaScript code, it's worth learning.

and in the new form, it's no longer the same as before each form must be in <form></form> within, as long as the <form></form> within the definition of a ID , and you can insert the form anywhere on the page, as long as the form is form property points to this defined ID can, that is, to complete the associated, greatly improve the form of any degree, it is worth a praise. Just like the following example:

<formid=iform><inputtype= "text" Name= "I'm inside the form"/></form><inputtype= "text" Name= "I'm outside the form" form= "foo"/>

HTML5 a number of new form items are added in:

Email type

<inputtype= "Email" name= "My_email"/>

Email the form is used to enter in the text box Email the contents of the format, if the input is non-standard Email format, it will prompt you to re-enter the error.

URL type

<inputtype= "url" name= "My_url"/>

URL The form is used to enter the URL content in the text box, and the browser automatically adds the URL / http , so just enter the following content, if the input does not conform to the URL format, it will prompt the error, re-enter.

Number type

<inputtype= "number" name= "My_number" min= "1" max= "Ten" step= "2"/>

NumberThe type form is used for user input of the specified value, as described above, in the text box to enter from1to theTenin press2is the value to be crossed (1,3,5,7,9), if you enter a different value, you will be prompted with an error and require a re-entry. Actually Numbertype also has a propertyvalueTo display the default values.

Range type

<inputtype= "Range" name= "My_Range" min= "0" max= "ten" step= "2" value= "6"/>

Range The form shows a progress bar of the numeric selection bar, by swiping to select their own values, as shown above, limited user swipe to select from 0 to the Ten in the 2 is a stepped numeric value, this does not present an error condition.

Data type

<inputtype= "Data" name= "My_data"/><inputtype= "month" name= "My_month"/><inputtype= "Week" Name= "My_ Week "/><inputtype=" Time "name=" My_time "/><inputtype=" Datatime "name=" My_datatime "/><inputtype= "Datatime_local" name= "my_datatime_local"/>

Data a form of a type contains a list of the items as shown above, all of which represent time, and if you enter an out-of-range time in the text box, you will get an error and there are few browsers supported.

Search type

<inouttype= "Search"/>

Search The form is displayed as a normal text field, with the text form, use Search the table is Tan and usually used for the search box at the top of the page.

Color type

<inouttype= "Color"/>

Color A form can provide a color selection box in a Web page, and the user can choose a color that will give value .

Here We also want to mention that is about The compatibility of HTML5, why mention this thing, of course, because it is used here, although the mainstream browser to the new form of support is mixed, some even do not support, This does not prevent us from using them, because HTML5 is compatible because the browser does not give an error to unsupported form items, but instead displays it as a normal text box. This does not affect the other content of the Web page, but also bring the semantic code, easy to read and understand, with the development of the browser, the support of the form will certainly be better, we have to set a good worry about it, rest assured that the use of it.

This article is from "Owl" blog, please make sure to keep this source http://9096185.blog.51cto.com/9086185/1431395