HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation.
This chapter covers the new input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Not all browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. |
Input Type: color
The color type is used for input fields that should contain a color.
Example
Select a color from a color picker:
Input Type: date
The date type allows the user to select a date.
Input Type: datetime
The datetime type allows the user to select a date and time (with time zone).
Example
Define a date and time control (with time zone):
Input Type: datetime-local
The datetime-local type allows the user to select a date and time (no time zone).
Example
Define a date and time control (no time zone):
Input Type: email
The email type is used for input fields that should contain an e-mail address.
Example
Define a field for an e-mail address (will be automatically validated when submitted):
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input Type: month
The month type allows the user to select a month and year.
Example
Define a month and year control (no time zone):
Input Type: number
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
Example
Define a numeric field (with restrictions):
Use the following attributes to specify restrictions:
- max – specifies the maximum value allowed
- min – specifies the minimum value allowed
- step – specifies the legal number intervals
- value – Specifies the default value
Try an example with all the restriction attributes: Try it yourself
Input Type: range
The range type is used for input fields that should contain a value from a range of numbers.
You can also set restrictions on what numbers are accepted.
Example
Define a control for entering a number whose exact value is not important (like a slider control):
Use the following attributes to specify restrictions:
- max – specifies the maximum value allowed
- min – specifies the minimum value allowed
- step – specifies the legal number intervals
- value – Specifies the default value
Input Type: search
The search type is used for search fields (a search field behaves like a regular text field).
Example
Define a search field (like a site search, or Google search):
Input Type: tel
The tel type is used for input fields that should contain a telephone number.
Example
Define a field for entering a telephone number:
Input Type: time
The time type allows the user to select a time.
Example
Define a control for entering a time (no time zone):
Input Type: url
The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.
Example
Define a field for entering a URL:
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Input Type: week
The week type allows the user to select a week and year.
Example
Define a week and year control (no time zone):
HTML5 <input> Tag
Tag | Description |
---|---|
<input> | Defines an input control |