HTML5 HTML Element Extension (bottom)-enhanced Form elements worth attention

Comments: Among HTML5 enhancement elements, the most noteworthy is form elements. In HTML5, forms have been significantly trimmed, some functions that previously needed to be implemented through JavaScript encoding can now be easily implemented without coding. If you are interested, you can learn more and it may be helpful to you.

The most noteworthy element of HTML5 enhancement is the form element. In HTML5, forms have been significantly trimmed, and some functions previously implemented through JavaScript encoding can now be easily implemented without coding. Note the following before starting the discussion:

In HTML5, a form control can be external to one or more forms to which it belongs. Therefore, form controls such as fieldset, label, and input are added with the form attribute to identify the form to which the form control belongs.

In HTML5:

1. The form element adds two new attributes: autocomplete and novalidate. The autocomplete attribute is used to enable the "drop-down suggestion list" function. The novalidate attribute is used to disable the form verification function, which is useful during testing.

2. The fieldset element adds three new attributes: disable, name, and form. The disable attribute is used to disable fieldset. The name attribute is used to set the name of fieldset. The form attribute value is the ID of one or more forms to which fieldset belongs. As mentioned above, when fieldset is placed outside the form, you must set the form attribute of the fieldset label so that 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. The for attribute is worth mentioning here. I have never noticed it before. The for attribute is used to specify the form Control affiliated to the label. Clicking this label will give the affiliated form control focus, for example:

The Code is as follows:
<Form action = "demo_form.asp" id = "form1">
<Label for = "name"> Click Me </label> <input id = "name" type = "text"> </input>
<Input type = "submit" value = "Submit"/>
</Form>

Click "Click Me". Then, the following input box will get the focus.

4. The input element introduces some new types and attributes to enhance the availability of the form. These new input types are useful for organizing and classifying data. Unfortunately, no browser supports all these types.
In addition to the buttons, text, submit, checkbox, radio, select, and password types, HTML5 adds the following new input types:

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

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

The Code is as follows:
<Form action = "demo_form.asp">
Select your favorite color: <input type = "color" name = "favcolor"/>
Birthday: <input type = "date" name = "bday"/>
Birthday (date and time): <input type = "datetime" name = "bdaytime"/>
Birthday (date and time): <input type = "datetime-local" name = "bdaytime"/>
Birthday (month and year): <input type = "month" name = "bdaymonth"/>
Select a time: <input type = "time" name = "usr_time"/>
Select a week: <input type = "week" name = "week_year"/>
Quantity (between 1 and 5): <input type = "number" name = "quantity" min = "1" max = "5"/>
Quantity (between 1 and 10): <input type = "range" name = "points" min = "1" max = "10"/>
Search Google: <input type = "search" name = "googlesearch"/>
Telephone: <input type = "tel" name = "usrtel"/>
Add your homepage: <input type = "url" name = "homepage"/>
E-mail: <input type = "email" name = "usremail"/>
<Input src = "submitbutton.png" type = "submit"/>
</Form>

The following are the newly added input attributes:
Autocomplete: Displays the information you have previously entered. The value can be "on" or "off ". Applicable to text, search, url, tel, email, password, datepickers, range, and color types.

Autofocus: After the page is loaded, the focus is automatically obtained.
Form: Specifies the form to which the input belongs. It can be multiple.
Formaction: Specifies the page (URL) or file after the form is submitted and processed.
Formenctype: Specifies how the data is encoded after the form is submitted.
Formmethod: Specifies the HTTP Method for sending form data, which overwrites the HTTP Method of the corresponding form.
Formnovalidate: The validity of the data is not checked before submission.
Formtarget: Specify where to display the response content after the form is submitted.
Height, width: The length and width of the input box. Only applicable to the image type.
Max, min: Maximum and minimum values of input values. Applicable to meaningful number, range, and date types.
Multiple: Whether to enter multiple values. This parameter is applicable to the email and file types.
Pattern: Indicates the regular expression used to verify the input value. It is applicable to text, search, url, tel, email, and password.
Placeholder: Enter the prompt information, applicable to text, search, url, tel, email, password.
Required: Required. If not, the form cannot be submitted. It is applicable to text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file type.
Step: Enter the step value for automatic growth, applicable to the number, range, date, datetime, datetime-local, month, time, and week types.
List: Candidate list of input items, which must be used with the datalist element. The list attribute can be used in these types: text, search, url, tel, email, date, number, range, and color, it is effective on FireFox. Let's look at a small example:

The Code is as follows:
<Fieldset>
<Legend> Favorites </legend>
<P>
<Label>
<Input type = "text" name = "favorites" list = "options">
<Datalist id = "options">
<Option value = "A">
<Option value = "B">
<Option value = "C">
</Datalist>
</Label>
</P>
</Fieldset>

The following example shows how to use various attributes and run them in different browsers to view the actual results:

The Code is as follows:
<Form action = "demo_form.asp">
E-mail: <input type = "email" name = "email" autocomplete = "on"/>
Image: <input type = "image" src = "img_submit.gif" alt = "Submit" width = "48" height = "48"/>
Enter a date before 1980-01-01: <input type = "date" name = "bday" max = "1979-12-31">
Enter a date after 2000-01-01: <input type = "date" name = "bday" min = "2000-01-02">
Quantity (between 1 and 5): <input type = "number" name = "quantity" min = "1" max = "5"/>
Select images: <input type = "file" name = "img" multiple = "multiple"/>
Country code: <input type = "text" name = "country_code" pattern = "[A-Za-z] {3}" title = "Three letter country code"/>
First Name: <input type = "text" name = "fname" placeholder = "First name"/>
Username: <input type = "text" name = "usrname" required = "required"/>
Number: <input type = "number" name = "points" step = "3"/>

<Input type = "submit"/>
<Input type = "submit" formaction = "demo_admin.asp" value = "Submit as admin"/>
<Input type = "submit" formenctype = "multipart/form-data" value = "Submit as Multipart/form-data"/>
<Input type = "submit" formmethod = "post" formaction = "demo_post.asp" value = "Submit using POST"/>
<Input type = "submit" formnovalidate = "formnovalidate" value = "Submit without validation"/>
<Input type = "submit" formtarget = "_ blank" value = "Submit to a new window"/>
</Form>
<Form action = "demo_form.asp" id = "form1">
First name: <input type = "text" name = "fname"/>
<Input type = "submit" value = "Submit"/>
</Form>
Last name: <input type = "text" name = "lname" form = "form1"/>

Suggestion: although not all browsers support all types, we encourage you to use these new types, because even if the browser does not support them, it will only degrade to a simple text input box.

Practical reference:
W3C Tutorial: http://www.w3schools.com/html5/default.asp
HTML5 official guide: http://dev.w3.org/html5/html-author/
Pretty good guidance site: http://html5doctor.com/
HTML5 Tutorial: http://www.html5china.com/
A good front-end blog: http://www.pjhome.net/default.asp? CateID = 1
JS operation form related knowledge: http://www.cnblogs.com/xugang/archive/2010/08/12/1798005.html