HTML5 input type
HTML5 has several new form input types. These new features provide better input control and validation.
This chapter provides a comprehensive introduction to these new input types:
#color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Note: Not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.
Input type: color
The color type is used in the input field and is mainly used to select colors, as shown below:
php中文网(php.cn)
Run the program to try it
Input type: date
#date type allows you to select a date from a date picker date.
php中文网(php.cn)
Run the program to try it
Input type: datetime
The datetime type allows you to select a date ( UTC time).
Example
Define a date and time controller (local time):
php中文网(php.cn)
Run the program to try it
Input type: datetime-local
The datetime-local type allows you to select a date and time (without time zone).
Example
Define a date and time (without time zone):
php中文网(php.cn)
Run the program and try it
Input type: email
The email type is used for input fields that should contain e-mail addresses.
Example
When submitting the form, it will automatically verify whether the value of the email field is legal and valid:
php中文网(php.cn)
Run the program and enter a legal value Try it with an illegal email
Note: Internet Explorer 9 and earlier IE versions do not support type="email"
Input type: month
# The month type allows you to select a month.
Example
Define month and year (no time zone):
php中文网(php.cn)
Run the program and try it
Input type: number
#number type is used for input fields that should contain numerical values.
You can also set limits on the numbers accepted:
Example
Define a numeric input field (limitation):
php中文网(php.cn)
Run the program and try it
Use the following attributes to specify the limit on the numeric type:
max- Requirement Maximum allowed value
min - specifies the minimum value allowed
step - specifies the legal number interval (if step="3", The legal numbers are -3, 0, 3, 6, etc.)
value - Specifies the default value
Example
Example with all qualified attributes
php中文网(php.cn)
Run the program to try it
Input type: range
The range type is used for input fields that should contain numeric values within a certain range.
Range types are displayed as sliders.
Example
Define a value that does not need to be very precise (similar to slider control):
php中文网(php.cn)
Run the program and try it
Please use the following attributes to specify limits on numeric types:
max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number interval
value - specifies the default value
Input type: search
search type is used for search fields, such as site search Or Google search.
Example
Define a search field (similar to site search or Google search):
php中文网(php.cn)
Run the program and try it
Input type: tel
##Example
Definition input phone Number field:Run the program to try itphp中文网(php.cn)
Input type: time The time type allows you to select a time.
Example
Run the program and try itphp中文网(php.cn)
Input type: url
The url type is used for input fields that should contain URL addresses. When submitting the form, the value of the url field will be automatically verified.Example
Run the program to try itphp中文网(php.cn)
Input type: week
# The week type allows you to select the week and year.Example
HTML5 Tag
| ## Tag | Description |
| Description input inputter |
Note
: Not all major browsers support the new input types, but you can already use them in all major browsers . Even if it is not supported, it can still be displayed as a regular text field.
![Front-end Vue3 actual combat [handwritten vue project]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST tutorial [Popularization of technical concepts related to network communication]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
