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
Input Type: color
The color type is used for input fields that should contain a color.
Example
Select a color from a color picker:
Select your favorite color: <input type="color" name="favcolor" />
Input Type: date
The date type allows the user to select a date.
Example
Define a date control:
Birthday: <input type="date" name="bday" />
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):
Birthday (date and time): <input type="datetime" name="bdaytime" />
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):
Birthday (date and time): <input type="datetime-local" name="bdaytime" />
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):
E-mail: <input type="email" name="usremail" />
Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
You can also set restrictions on what numbers are accepted:
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):
Birthday (month and year): <input type="month" name="bdaymonth" />
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):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5" />
Use the following attributes to specify restrictions:
You can also set restrictions on what numbers are accepted.
- 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: 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):
<input type="range" name="points" min="1" max="10" />
Use the following attributes to specify restrictions:
The value of the url field is automatically validated when the form is submitted.
Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).- 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):
Search Google: <input type="search" name="googlesearch" />
Input Type: tel
Example
Define a field for entering a telephone number:
Telephone: <input type="tel" name="usrtel" />
Input Type: time
The time type allows the user to select a time.
Example
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time" />
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:
Add your homepage: <input type="url" name="homepage" />
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):
Select a week: <input type="week" name="week_year" />
.jpg)
