New Input Types in HTML5
This chapter covers these new input types in detail:
Note:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Not all mainstream browsers support the new input types, but you can already use them in all mainstream browsers. Even if they are not supported, they will still display as regular text fields.Not all mainstream browsers support the new input types, but you can already use them in all mainstream browsers. They will still display as a regular text field even if they are not supported.
Input Type: color
The color type is used in input fields to select colors, as shown below:
Example
Choose a color from the color picker:
Try it out »
Input Type: date
The date type allows you to select a date from a date picker.
Input Type: datetime
The datetime type allows you to select a date (UTC time).
Example
Define a date and time controller (local time):
Try it out »
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):
Try it out »
Input Type: email
The email type is used for input fields that should contain email addresses.
Example
When submitting the form, the email field automatically validates the value to ensure it is valid:
Try it out »
Note:The Safari browser on iPhone supports the email input type and provides a touch screen keyboard that complements it (adding @ and .com options).
Input Type: month
The month type allows you to select a month.
Example
Define a month and year (no time zone):
Try it out »
Input Type: number
The number type is used for input fields that should contain numerical values.
You can also set limits on the numbers that can be accepted:
Example
Define a numerical input field (with limits):
Try it out »
Use the following attributes to set limits on the number type:
| Attributes | Description |
|---|---|
| disabled | To make the input field disabled |
| max | To set the maximum value |
| maxlength | To set the maximum character length |
| min | To set the minimum value |
| pattern | To set the pattern for input validation |
| readonly | To make the input field read-only |
| required | To make the input field required |
| size | To set the visible character count |
| step | To set the legal numeric interval |
| value | To set the default value |
Try it out with all limit attributesTry it out
Input Type: range
The range type is used for input fields that should contain a range of numeric values.
The range type displays as a slider.
Example
Define a slider input field (not requiring very precise values):
Try it out »
Use the following attributes to set limits on the number type:
- max - To set the maximum value
- min - To set the minimum value
- step - To set the legal numeric interval
- value - To set the default value
Input Type: search
The 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):
Try it out »
Input Type: tel
Example
Define a phone number input field:
Try it out »
Input Type: time
The time type allows you to select a time.
Example
Define a time input field (no time zone):
Try it out »
Input Type: url
The url type is used for input fields that should contain URL addresses.
When submitting the form, the url field automatically validates the value.
Example
Define a URL input field:
Try it out »
Note:The Safari browser on iPhone supports the url input type and provides a touch screen keyboard that complements it (adding .com options).
Input Type: week
The week type allows you to select a week and year.
Example
Define a week and year (no time zone):
Try it out »
HTML5 <input> Tag
| Tag | Description |
|---|---|
| <input> | Description of the input element |