Among the HTML5 enhanced elements, the most noteworthy one is the form element. In HTML5, forms have been greatly trimmed, and some features that previously required JavaScript encoding can now be easily implemented without coding. Before starting the discussion, one thing to note:
In HTML5, a form control can be outside of one or more forms to which it belongs. Therefore, form controls such as fieldset, label, and input have all added form attributes 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 property is used to enable the drop-down suggestion list feature, and the novalidate property is used to turn off the form validation feature, which is useful when testing.
2. The fieldset element adds three new attributes: disable, name and form. The disable property is used to disable fieldset, the name property is used to set the name of the fieldset, and the value of the form property 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 property 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. It is worth mentioning here that the for attribute, which I have never paid attention to before. The for attribute is used to specify the form control attached to the label. This way, when clicking this label, the attached form control will gain focus, such as:
<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 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 classifying data. Unfortunately, no browser can support all of these types well.
In addition to the original button, text, submit, checkbox, radio, select, password, HTML5 adds the following new input types:
Color: colorVarious dates: date, datetime, datetime-local, month, week, time
Email: email
Number: number
Range
Search: search
Phone: tel
URL type: url
You can run the following example to view the support status of different browsers:
<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 properties:
autocomplete : Automatically display the previously entered information, with the value on or off. Applicable to text, search, url, tel, email, password, datepickers, range, and color types. autofocus : Automatically get focus after the page is loaded. form : specifies the form to which the input belongs, which can be multiple. format : specifies the page (URL) or file that processes this input after form is submitted. Formenctype : Specifies how the data is encoded after form is submitted. formmethod : Specifies the HTTP method for sending form data, which will override the HTTP method of the corresponding form. formnovalidate : The validity of the data is not checked before submission. formtarget : Specifies where to display the content of the form after submission. height, width : input box length and width, only applicable to image types. max, min : The maximum and minimum values of the input value. Applicable to meaningful number, range, date types. multiple : Whether to allow multiple values to be entered, suitable for email and file types. pattern : Specifies the regular expression to verify the input value, applicable to text, search, url, tel, email, password. placeholder : The prompt information before input, applicable to text, search, url, tel, email, password. required : Whether it is required, if it is not required, the form cannot be submitted. It applies to text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file types. step : Enter the step value when automatically growing, suitable for number, range, date, datetime, datetime-local, month, time and week types. list : The candidate list of input items 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. It is estimated to be valid on FireFox. See a small example:<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 tries to use various properties, which can be run in different browsers to view the actual effect:
<form action="demo_form.asp">
E-mail: <input type="email" name="email" autocomplete="on" />
Image: <input type="image" src="img_submit.gif"/>
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}" />
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" format="demo_admin.asp" value="Submit as admin" />
<input type="submit" formulactype="multipart/form-data" value="Submit as Multipart/form-data" />
<input type="submit" formula ="post" format="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, you are still encouraged to use these new types, because even if the browser does not support it, it will just degenerate into a simple text input box. Practical reference: W3C tutorial: http://www.w3schools.com/html5/default.aspOfficial HTML5 guidance: http://dev.w3.org/html5/html-author/
A pretty good guide website: http://html5doctor.com/
HTML5 Chinese tutorial: http://www.html5china.com/
A good front-end blog: http://www.pjhome.net/default.asp?cateID=1
Related knowledge about JS operation forms: http://www.VeVb.com/xugang/archive/2010/08/12/1798005.html