HTML5 Input Types
| « Previous | Next Chapter » |
HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Browser Support
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| No | No | 9.0 | No | No | |
| url | No | No | 9.0 | No | No |
| number | No | No | 9.0 | 7.0 | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | No | No |
| search | No | No | 11.0 | No | No |
| color | No | No | 11.0 | No | No |
Note: Opera has the best support for the new input types. However, you can already start using them in all major browsers. If they are not supported, they will be behave as regular text fields.
Input Type - email
The email type is used for input fields that should contain an e-mail address.
The value of the email field is automatically validated when the form is submitted.
Example
Try it yourself » |
Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen keyboard to match it (adds @ and .com options).
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
Try it yourself » |
Tip: Safari on the iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
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
Try it yourself » |
Use the following attributes to specify restrictions for the number type:
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value allowed |
| min | number | Specifies the minimum value allowed |
| step | number | Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) |
| value | number | Specifies the default value |
Try an example with all the restriction attributes: Try it yourself
Tip: Safari on the iPhone recognizes the number input type, and changes the on-screen keyboard to match it (shows numbers).
Input Type - range
The range type is used for input fields that should contain a value from a range of numbers.
The range type is displayed as a slider bar.
You can also set restrictions on what numbers are accepted:
Example
Try it yourself » |
Use the following attributes to specify restrictions for the range type:
| Attribute | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value allowed |
| min | number | Specifies the minimum value allowed |
| step | number | Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) |
| value | number | Specifies the default value |
Input Type - Date Pickers
HTML5 has several new input types for selecting date and time:
- date - Selects date, month and year
- month - Selects month and year
- week - Selects week and year
- time - Selects time (hour and minute)
- datetime - Selects time, date, month and year (UTC time)
- datetime-local - Selects time, date, month and year (local time)
The following example allows you to select a date from a calendar:
Example
Try it yourself » |
Input type "month": Try it yourself
Input type "week": Try it yourself
Input type "time": Try it yourself
Input type "datetime": Try it yourself
Input type "datetime-local": Try it yourself
Input Type - search
The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.
Input Type - color
The color type is used for input fields that should contain a color.
This input type will allow you to select a color from a color picker:
Example
Try it yourself » |
| « Previous | Next Chapter » |