Introduction to the new 8 input types in HTML5

An already existing input type HTML code example:

The

code is as follows:


text field <input type= "text" >


radio button <input type= "Radio" >


check box <input type= "checkbox" >


drop down list <select><option>


password domain <input type= "password" >


Submit button <input type= "Submit" >


clickable button <input type= "button" >


image button <input type= "image" >


hidden domain <input type= "hidden" >


reset button <input type= "reset" >


file domain <input type= "file" >

In HTML5, a number of new forms input input types have been added to enable better input control and validation by using these new elements.
1, the application of the type of email
The input element of the email type is a text input box that is specifically used to enter the e-mail address, and automatically verifies the value of the email input box when submitting the form.

The
code is as follows:


<input type= "email" name= "User_email"/>

2, the application of the type of URL
The input element of the URL type provides a text box for entering special text such as the URL address.

The
code is as follows:


<input type= "url" name= "User_url"/>

3. Application of Number Type
The input element of type number provides a text box for entering numeric values.

The
code is as follows:


<input type= "number" name= "Number1" min= "1" max= "a" step= "4"/>

4, Range type of application
The input element of the range type provides the input containing a range of numbers worth text boxes, displayed as scrollbars in the Web page.

The
code is as follows:


<input type= "range" name= "Range1" min= "1" max= "a"/>

5, date detection type of application
input type HTML code feature description

The
code is as follows:


date <input type= "Date" >

Select Day, month, year
Month <input type= "month" >
Select Month, year

The
code is as follows:


Week &lt;input type= "Week" &gt;

Select Zhou

The
code is as follows:


time &lt;input type= ' time ' &gt;

Select time (Hours and minutes)

The
code is as follows:


datetime &lt;input type= "datetime" &gt;

Select time, day, month, year (UTC time)

The
code is as follows:


datetime-local


&lt;input type= "datetime-local" &gt; select time, Day, month, year (local time)

6. Application of Search Type

The input element of the search type provides a text box for entering search keywords.

The
code is as follows:


&lt;input type= "search" name= "Search1"/&gt;


input[type= "Search"]{


-webkit-appearance:textfield;


}

7, tel type of application
The input element of the Tel type provides a text box specifically for entering phone numbers.

The
code is as follows:


&lt;input type= "Tel" name= "tel"/&gt;

8, color type of application
The input element of the color type provides a text box that is specifically used to set the color.

The
code is as follows:


&lt;input type= "color" name= "Color"/&gt;