Parse the newly added HTML5 form elements and attributes, and add html5 form instances.

Parse the newly added HTML5 form elements and attributes, and add html5 form instances.
This article mainly introduces the new form elements and attributes of html5. it has some reference value! For more information, see

This article uses the example code to demonstrate the new form elements and attributes of HTML5, the Demo code contains the placeholder, autofocus, list and datalist elements, search text box, email text box, number text box, range text box, tel text box, url text box, and there are also input elements of Date and Time types.
The sample code is as follows:

The Code is as follows: <! DOCTYPE html>
<Meta charset = "UTF-8">
<Title> HTML5 mobile Web Development Guide </title>
<Style type = "text/css">
H1, h2, h3, h4, h5, h6
{
Text-align: center;
}

Input
{
Width: pixel PX;
}

Input [type = "range"]
{
-Webkit-appearance: none! Important;
-Webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset,
0px 2px 10px 0px black inset, 1px 0px 2px rgba (0, 0, 0, 0.4) inset,
0 0px 1px rgba (0, 0, 0, 0.6) inset;
Margin-top: 2px;
Background-color: #272728;
Border-radius: 15px;
Width: 400px;
}

/*-Webkit-slider-thumb: Set the style of the slider above */
Input [type = "range"]:-webkit-slider-thumb
{
-Webkit-appearance: none! Important;
Cursor: default;
Top: 1px;
Height: 9px;
Width: 20px;
Background: none repeat scroll 0 0 0 #777;
Border-radius: 15px;
-Webkit-box-shadow: 0-1px 1px black inset;
}
</Style>


<Header>
<Section>
<H1>
HTML5 mobile Web Development Guide </Section>
</Header>
<Fieldset>
<Legend> HTML5 new element-form Element </legend>

<Section>
<Pre> placeholder attributes:
It is generally used in text boxes.
The main function is to prompt the text box when the text box is not input and the content is empty.
Effect:
When the text box obtains the focus, the system prompts that the information is cleared automatically, the focus is lost, and no content is entered.
Saves the effect of traditional text boxes that can be achieved through onfocel and onblur events.
(Compatible with most PC and Mobile browsers, it can only be said that technology has indeed improved)
Example: <input type = "text" placeholder = "I Am a placeholder, used for prompting">
</Pre>
</Section>
<Section>
<Pre> autofocus attributes:
Specifies that the control automatically obtains the focus. Note that only one control on an HTML page can have the attribute to be changed.
Example: <input type = "text" autofocus = "true" placeholder = "I set autofocus to automatically retrieve focus attributes">
</Pre>
</Section>
<Section>
<Pre> list and datalist elements:
The main function of the list element is to prompt the text box input, and the prompted data source is provided by datalist
Currently, the list and datalist elements are only supported by the Opera Browser. No mobile browser supports this feature.
Example: <input type = "text" placeholder = "I added the list attribute and datalist element. Few people know me." list = "myDataList">
<Datalist id = "myDataList">
<Option label = "1"> I am datalist1 </option>
<Option label = "2"> I am datalist2 </option>
<Option label = "3"> datalist3 </option>
<Option label = "4"> I am datalist4 </option>
</Datalist>
</Pre>
</Section>
<Section>
<Pre> search text box:
Text Box mainly used to search for keywords
This text box is the only difference from a common text box. In Safari and Chrome, the text box is rounded.
Example: <input type = "search" placeholder = "I Am a search text box">
</Pre>
</Section>
<Section>
<Pre> email text box:
Is a text box that can specify the email content. It is usually used in the input text box that inputs the email address.
This text box looks almost the same as a common text box, but it is actually different in the Safari mobile browser.
The keyboard displays the corresponding keyboard based on the text box type.
Example: <input type = "email" placeholder = "I am an email text box">
</Pre>
</Section>
<Section>
<Pre> number text box:
Is a text box type used to enter numbers
It can be used with min, max, and step attributes.
Example: <input type = "number" value = "0" min = "0" max = "10" step = "1">
</Pre>
</Section>
<Section>
<Pre> range text box:
Is a Value Range Input text box type, provides a sliding input mode
Use with min, max, range, and other attributes
Example: <input type = "range" value = "1" min = "0" max = "100" step = "1">
</Pre>
</Section>
<Section>
<Pre> tel text box:
Is a text box type for users to enter phone numbers
In a mobile browser, the keyboard of this text box displays the corresponding keyboard based on the text box type.
Example: <input type = "tel" placeholder = "I Am a tel text box">
</Pre>
</Section>
<Section>
<Pre> url text box:
Is a text box type for users to enter Url addresses.
In a mobile browser, the keyboard of this text box displays the corresponding keyboard based on the text box type.
Example: <input type = "url" placeholder = "I Am a url text box">
</Pre>
</Section>
<Section>
<Pre> In HTML5 specifications, in addition to new form elements, there are also input elements of Date and Time types.
However, these types are not widely supported.
The details are as follows:
Date and time (including time zone ):
<Input type = "datetime">
Date and time (excluding the time zone ):
<Input type = "datetime-local">
Time selector text box:
<Input type = "time">
Date selector text box:
<Input type = "date">
Year week selector text box:
<Input type = "week">
Month selector text box:
<Input type = "month">
</Pre>
</Section>
</Article>
</Fieldset>
<Footer>
<Section>
<H5>
HTML5 new element-form Element
</H5>
</Section>
</Footer>

</Html>

HTML 5 <input> form attributes

Form can be understood as a box, and all input is put in it,
The form attribute action indicates the backend page for processing the form content, which is usually php or asp. The method attribute indicates the method for sending the request, including get and post, post encryption, no byte restrictions.

In actual development, the input content of a page cannot be all put in one link, and other content may be inserted in the middle. Therefore, in html5, form has a new element and an ID is set, then, set the form attribute in other input elements with the value equal to ID, so that there is no need to have multiple form tags in a page, then, all input tags can be put into the form element with the same ID. Example:

<Form action = "/example/html5/demo_form.asp" method = "get" id = "user_form"> First name: <input type = "text" name = "fname"/> <input type = "submit"/> </form> <p> The following input fields are outside the form element, but it is still part of the form. </P> Last name: <input type = "text" name = "lname" form = "user_form"/> the input labels below are not placed in the form element. However, it has a form attribute pointing to the ID value of the form tag, so that they are bound.


Example of writing an HTML5 form

Form:
Range value select Space range

<Input type = "range" id = "uage" min = "18" max = "80" step = "1" value = "22"/>
Number in the number selector Space
<Input type = "number" id = "choosenum" min = "18" max = "80" step = "1" value = "22"/>
Email: <input type = "email" id = "uemail"/>
Mobile Phone: <input type = "tel" id = "utel"/>
Home page: <input type = "url" id = "uhomepage"/>
Search: <input type = "search" id = "usearch"/>
In addition to the preceding types of declarations, HTML5 also adds a new attribute placeholder and required to the form. We recommend you a Video. The Video series name is Buid New World. The seventh episode is the HTML 5 Audio Video tag and more features.