HTML 5.0 - 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:
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Browser Support
| Input type |
IE |
Firefox |
Opera |
Chrome |
Safari |
| email | No | No | 9.0 | No | No |
| url | No | No | 9.0 | No | No |
| number | No | No | 9.0 | No | No |
| range | No | No | 9.0 | 4.0 | 4.0 |
| Date pickers | No | No | 9.0 | No | No |
| search | No | No | No | No | No |
| color | No | No | No | 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.
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.
E-mail: <input type="email" name="user_email" />
Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen keyboard to match it (adds @ and .com options).
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.
Homepage: <input type="url" name="user_url" />
Tip: Safari on the iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
The number type is used for input fields that should contain a numeric value.
You can also set restrictions on what numbers are accepted:
Points: <input type="number" name="points" min="1" max="10" />
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 |
Tip: Safari on the iPhone recognizes the number input type, and changes the on-screen keyboard to match it (shows numbers).
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:
<input type="range" name="points" min="1" max="10" />
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 |
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:
Date: <input type="date" name="user_date" />
The search type is used for search fields, like a site search, or Google search.
The search field behaves like a regular text field.
