HTML5 HTML element extension (Part 2) - the enhanced Form element deserves attention_html5 tutorial skills

Among the HTML5 enhanced elements, the most noteworthy is the form element. In HTML5, forms have been significantly revamped, and some functions that previously required JavaScript coding can now be easily implemented without coding. Before we start the discussion, something needs to be noted:

In HTML5, form controls can be outside one or more forms to which they belong. Therefore, form controls such as fieldset, label, and input have added the form attribute to identify the form to which the form control belongs.

in HTML5 :

1. The form element itself adds two new attributes: autocomplete and novalidate. The autocomplete attribute is used to enable the "drop-down suggestion list" function, and the novalidate attribute is used to turn off the form validation function, which can be useful during testing.

2. The fieldset element adds three new attributes: disable, name and form. The disable attribute is used to disable the fieldset, the name attribute is used to set the name of the fieldset, and the value of the form attribute is the ID of one or more forms to which the fieldset belongs. As mentioned earlier, when the fieldset is placed outside the form, you must Set the form attribute of the fieldset tag so that the fieldset can be correctly associated with one or more forms.

3. In addition to the for attribute, the label element only adds the form attribute. What’s worth mentioning here is the for attribute, which I haven’t really noticed before. The for attribute is used to specify the form control attached to the label, so that when the label is clicked, the attached form control will gain focus, for example:

Copy code

The code is as follows:

Click Me< ;/label>

> ;

Click "Click Me", and the following input box will gain focus.

4. The input element introduces some new types and attributes to enhance the usability of the form. These new input types are very useful for organizing and categorizing data, but unfortunately no browser supports all of them well.
In addition to the original button, text, submit, checkbox, radio, select, password types, HTML5 has added the following new input types:

Color: color
Various dates: date, datetime, datetime-local, month, week, time
Email: email
Number: number
Range: range
Search: search
Telephone: tel
URL type: url

You can run the following example to check the support of different browsers:

Copy the code

The code is as follows:

Select your favorite color:
Birthday: < ;input type="date" name="bday" />
Birthday (date and time):
Birthday (date and time) :
Birthday (month and year):
Select a time:
Select a week:
Quantity (between 1 and 5 ):
Quantity(between 1 and 10):
Search Google:
Telephone:
Add your homepage:
E-mail:

The following are the newly added input attributes:
autocomplete: Automatically display previously entered information, taking the value "on" or "off". Applicable to text, search, url, tel, email, password, datepickers, range, and color types.

autofocus: Automatically obtains focus after the page is loaded.
form: Specify the form to which the input belongs, which can be multiple.
formaction: Specify the page (URL) or file to process this input after the form is submitted. ​
formenctype: Specify how to encode the data after the form is submitted.
formmethod: Specifies the HTTP method for sending form data, which will override the HTTP method of the corresponding form.
formnovalidate: Does not check the validity of data before submission.
formtarget: Specify where to display the response content after the form is submitted.
height, width: input box length and width, only applicable to image type. ​
max, min: The maximum and minimum values ​​of the input value. Suitable for meaningful number, range, and date types. ​
multiple: Whether to allow multiple values ​​to be entered, applicable to email and file types.
pattern: Specifies the regular expression to verify the input value, suitable for text, search, url, tel, email, password.
placeholder: Prompt information before input, applicable to text, search, url, tel, email, password.
required: Whether it is a required item. If the required item is not filled in, the form cannot be submitted. Applicable to text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file types.
step: Enter the step value for automatic growth, applicable to number, range, date, datetime, datetime-local, month, time and week types.
list: A candidate list of input items, which needs to be used in conjunction with the datalist element. The list attribute can be used on these types: text, search, url, tel, email, date, number, range and color. Visual inspection works on FireFox. Look at a small example:

Copy the code

The code is as follows:

Favorites

The following example attempts to use each Properties, you can run it in different browsers to see the actual effect:

Copy the code

The code is as follows:

E-mail:
Image:
Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
Quantity (between 1 and 5):
Select images:
Country code:
First Name:
Username:
Number:

First name:

Last name:

建议：虽然并不是所有的浏览器都支持全部的类型，但是还是鼓励大家使用这些新类型，因为即使浏览器不支持，只不过是会退化成简单的text输入框而已。

实用参考：
W3C的教程：http://www.w3schools.com/html5/default.asp
HTML5官方指导：http://dev.w3.org/html5/html-author/
相当不错的一个指导网站：http://html5doctor.com/
HTML5中文教程：http://www.html5china.com/
一个不错的前端博客：http://www.pjhome.net/default.asp?cateID=1
JS操作表单的相关知识：http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html