How to use the new INPUT input type added by HTML5
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.
