Introduction to the 8 new INPUT input types in HTML5_html5 tutorial skills

Existing input type HTML code examples:

Copy the code

The code is as follows:

Text field
Radio button
Checkbox
Drop-down list
Password field
Submit button
Clickable button
Image button
Hidden field
Reset button
File field

In HTML5, multiple new form input input types have been added. By using these new elements, you can Enable better input control and validation.
1. Email type application
The email type input element is a text input box specially used to enter an email address. When submitting the form, the email input will be automatically verified. The value of the box.

Copy code

The code is as follows:

2. Application of url type
The input element of url type provides a text box for entering special text such as url address.

Copy code

The code is as follows:

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

Copy code

The code is as follows:

4. Application of range type
The input element of range type provides a text box for inputting numerical values ​​within a certain range, which is displayed as a scroll bar on the web page.

Copy code

The code is as follows:

5. Date checkout type application
Input type HTML code Function description

Copy code

The code is as follows:

date

Select day, month, year
month
Select month and year

Copy code

The code is as follows:

week

Select week and year

Copy code

The code is as follows:

time

Select time (hours and minutes)

Copy code

The code is as follows:

datetime

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

Copy code

Code As follows:

datetime-local
Select time, day, month, year (local time)

6. Search type applications

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

Copy code

The code is as follows:

input[type="search"]{
-webkit-appearance:textfield;
}

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

Copy code

The code is as follows:

8. Color type application
The color type input element provides a text box specially used to set the color.

Copy code

The code is as follows: