HTML5 Input Type
HTML5 has several new form input types. These new features provide better input control and verification.
This chapter comprehensively introduces 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 used in the input field is mainly used to select the color, as shown below:
Example
Choose a color from the color picker:
Choose the color you like: <input type="color" name="favcolor">
Input Type: date
The date type allows you to select a date from a date picker.
Example
Define a time controller:
Birthday: <input type="date" name="bday">
Input Type: datetime
The datetime type allows you to select a date (UTC time).
Example
Define a date and time controller (local time):
Birthday (date and time): <input type="datetime" name="bdaytime">
Input Type: datetime-local
The datetime-local type allows you to select a date and time (no time zone).
Example
Define a date and time (no time zone):
Birthday (date and time): <input type="datetime-local" name="bdaytime">
Input Type: email
The email type is used for input fields that should contain an e-mail address.
Example
When submitting the form, it will automatically verify whether the value of the email domain is legal and valid:
E-mail: <input type="email" name="email">
Tip: The Safari browser in iPhone supports the email input type and adapts it by changing the touch screen keyboard (add @ and .com options).
Input Type: month
The month type allows you to select a month.
Example
Define month and year (no time zone):
Birthday (month and year): <input type="month" name="bdaymonth">
Input Type: number
The number type is used for input fields that should contain numeric values.
You can also set limits on the accepted numbers:
Example
Define a numeric input field (limited):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
Use the following attributes to specify restrictions on number types:
| Attribute | Description |
|---|---|
| disabled | Specifies that the input field is disabled |
max  | Specifies the maximum allowable |
| maxlength | Specifies the maximum character length of the input field |
min | Specifies the minimum allowed value |
| pattern | Specifies the mode used to validate the input field |
| readonly | Specifies that the value of the input field cannot be modified |
| required | Specifies that the value of the input field is required |
| size | Specifies the number of visible characters in the input field |
| step | Specifies the legal number interval of the input field |
| value | Specifies the default value of the input field |
Try the sample with all the attributes are defined.
Input Type: range
The range type is used for input fields that should contain numeric values within a certain range.
The range type is displayed as a slider.
Example
Define a value that does not need to be very precise (similar to a slider control):
<input type="range" name="points" min="1" max="10">
Please use the following attributes to specify the restriction on the number type:
max-specifies the maximum allowable value
min-specifies the minimum allowed value
step-specify the legal interval of digits
value-specifies the default value
Input Type: search
The search type is used for search domains, such as site search or Google search.
Example
Define a search field (similar to site search or Google search):
Search Google: <input type="search" name="googlesearch">
Input Type: tel
Example
Define the input phone number field:
phone number: <input type="tel" name="usrtel">
Input Type: time
The time type allows you to select a time.
Example
Define the time controller that can be entered (without time zone):
Select period: <input type="time" name="usr_time">
Input Type: url
The url type is used for input fields that should contain a URL address.
When the form is submitted, the value of the url field will be automatically verified.
Example
Define the input URL field:
Add your homepage: <input type="url" name="homepage">
Tip: The Safari browser in the iPhone supports the url input type, and adapts it by changing the touch screen keyboard (adding the .com option).
Input Type: week
The week type allows you to select the week and year.
Example
Define week and year (no time zone):
Select week: <input type="week" name="week_year">
HTML5 <input> Tag
| Tag | Description |
|---|---|
| <input> | Describe input tag |