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 | 4.0 | 9.0 | 10.0 | No | |
url | No | 4.0 | 9.0 | 10.0 | No |
number | No | No | 9.0 | 7.0 | 5.1 |
range | No | No | 9.0 | 4.0 | 4.0 |
Date pickers | No | No | 9.0 | 10.0 | 5.1 |
search | No | 4.0 | 11.0 | 10.0 | No |
color | No | No | 11.0 | 12 | No |
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
E-mail: <input type="email" name="user_email" />
Try it yourself »
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
Homepage: <input type="url" name="user_url" />
Try it yourself »
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
Points: <input type="number" name="points" min="1" max="10" />
Try it yourself »
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 - 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
<input type="range" name="points" min="1" max="10" />
Try it yourself »
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)
Example
Date: <input type="date" name="user_date" />
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.The Opera browser will allow you to select a color from a color picker, Google's Chrome will only allow hexadecimal color values to be submitted:
Example
Color: <input type="color" name="user_color" />
Try it yourself »
HTML5 <input> Tag
Tag | Description |
---|---|
<input> | Defines an input field |
No comments:
Post a Comment