Example analysis of new form elements and attributes in HTML5_html5 tutorial skills

This article uses example code to demonstrate the new form elements and attributes of HTML5. The demonstration code includes placeholder attributes, autofocus attributes, list and datalist elements, search type text box, email type text box, number type text box, range type text box, tel type text box, url type text box, as well as date, time type input elements, etc.
The sample code is as follows:

Copy code

The code is as follows:

< section>

HTML5 Mobile Web Development Guide

< legend>HTML5 new element--form element

 placeholder attribute: <br> Generally used in text boxes <br> Its main function is When the text box is in an uninput state and the content is empty, the prompt content for the text box <br> Effect: <br> When the text box gains focus, the prompt information is automatically cleared. When the text box loses focus and no content is entered, the prompt information is automatically cleared again. Appears <br> Eliminating the need for traditional text boxes that require the help of onfocel and onblur events <br> (Compatible with most PC browsers and Mobile browsers, it can only be said that technology has indeed progressed) <br> Example: &lt ;input type="text" placeholder="I am a placeholder, used as a reminder"><br> 

< ;pre> autofocus attribute:
The specified control automatically obtains focus. It should be noted that there can only be one control on an HTML page with the changed attribute
Example:

 list and datalist elements: <br> The main function of the list element is to prompt text box input, and the data source of the prompt is provided by datalist <br> Currently, the list and datalist elements are only supported by the Opera browser, and no mobile browser even supports this feature <br> Example: <input type="text" placeholder="I added the list attribute and datalist element, but not many people understand me" list="myDataList"><br> <datalist id="myDataList"><br> <option label="1">I am datalist1</option><br> <option label="2">I am datalist2</option><br> <option label="3"> I am datalist3</option><br> <option label="4">I am datalist4</option><br> </datalist><br> 

 search type text box: <br> A text box mainly used to search for keywords<br> The only difference between this text box and an ordinary text box is that it is browsed in Safari and Chrome Under the browser, the appearance of the text box is rounded <br> Example: <input type="search" placeholder="I am a search type text box"><br> 

 Email type text box: <br> is a text box that can specify email content. It is usually used in the input text box for entering an email address. <br> This type of text box It looks almost the same as an ordinary text box, but it is actually different under the Safari mobile browser <br> The keyboard will display the corresponding keyboard according to the type of text box <br> Example: <input type ="email" placeholder="I am an email type text box"><br> 

 number type text box : <br> is a text box type used for inputting numbers <br> It can be used with min, max, and step attributes <br> Example: <input type="number" value="0" min=" 0" max="10" step="1"><br> 

 range type text box:<br> It is a numerical range input text box type that provides a sliding input method <br> It needs to be used with min, max, range and other attributes <br> Example: <input type="range" value=" 1" min="0" max="100" step="1"><br> 

 tel Type text box: <br> is a type of text box for users to enter phone numbers <br> In mobile browsers, the keyboard of this text box will display the corresponding keyboard according to the type of text box <br> Example: <input type="tel" placeholder="I am a tel type text box"><br> 

< pre> url type text box:
is a type of text box for users to enter Url address
In mobile browsers, the keyboard of this text box will display the corresponding keyboard according to the type of text box.
Example:

 In the HTML5 specification, in addition to new form elements, there are also date and time input elements <br> but these types are not widely supported <br> The details are as follows: <br> Date and time (Including time zone): <br> <input type="datetime"><br> Date and time (excluding time zone): <br> <input type="datetime-local"><br> Time selection Picker text box: <br> <input type="time"><br> Date picker text box: <br> <input type="date"><br> Week number picker text box for year :<br> <input type="week"><br> Month selector text box: <br> <input type="month"><br> 

HTML5 new element--form element