HTML5 Input Types (Continue)
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:
<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 |
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:
Date: <input type=”date” name=”user_date” />
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.
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:
Color: <input type=”color” name=”user_color” />
HTML5 <input> Tag
| Tag | Description |
|---|---|
| <input> | Defines an input field |