Shulou(Shulou.com)06/01 Report--

Most people don't understand the knowledge points of this article "How to use the new INPUT input type in HTML5", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "How to use the new INPUT input type in HTML5".

HTML code example for input types already available:

copy code

The code is as follows:

text field

radio button

check box

drop-down list

password domain

submit button

clickable button

the button with

hidden field

reset button

file field

In HTML5, a number of new form input types have been added, and by using these new elements, better input control and validation can be achieved.

1. Application of email type

The email type input element is a text input box dedicated to entering an E-mail address, and the value of the email input box is automatically validated when the form is submitted.

copy code

The code is as follows:

2. Application of url type

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

copy code

The code is as follows:

3. Application of number type

An input element of type number provides a text box for entering a numeric value.

copy code

The code is as follows:

4. Application of range type

An input element of type range provides a text box for entering values containing a range of numbers, which is displayed as a scroll bar on a web page.

copy code

The code is as follows:

5. Application of date detection type

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

The code is as follows:

datetime-local

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

6. Application of search type

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

copy code

The code is as follows:

input[type="search"]{

-webkit-appearance:textfield;

}

7. Application of tel type

The input element of type tel provides a text box specifically for entering phone numbers.

copy code

The code is as follows:

8. Application of color type

An input element of type color provides a text box dedicated to setting colors.

copy code

The code is as follows:

The above is about the content of this article "How to use the new INPUT input type in HTML5". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will be helpful to everyone. If you want to know more relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.