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:
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:
You can run the following example to check the support of different browsers:
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:
实用参考:
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