HTML5
New Input Types
HTML5 has several new input types for forms. These new
features allow better input control and validation.
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input
Type Examples:
Select a color from a color picker:
Select your favorite color : <input type="color" name="favcolor">
Select Birthday : <input type="date"
name="bday">
Define a date and time control (with time zone):
Birthday (date and time) : <input type="datetime" name="bdaytime">
Define a date and time control (no time zone):
Birthday (date and time) : <input type="datetime-local" name="bdaytime">
The time type allows the user to select a time.
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time">
Define a week and year control (no time zone):
Select a week: <input type="week" name="week_year">
The time type allows the user to select a time.
Define a control for entering a time (no time zone):
Select a time: <input type="time" name="usr_time">
Define a month and year control (no time zone):
Birthday (month and year) : <input type="month"
name="bdaymonth">
Define a field for an e-mail address (it will be automatically validated when submitted):
E-mail: <input
type="email" name="email">
The value of the URL field should contain a URL address and
automatically validated when the form is submitted.
Below example allow only http://www.example.example
Add your homepage: <input type="url" name="homepage">
The number type is used for input fields that should contain
a numeric value.
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:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
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.
<input
type="range" name="points" min="1"
max="10">
Use the following attributes to specify restrictions:
- max - specifies the maximum value allowed
- min - specifies the minimum value allowed
- step - specifies the legal number intervals
- value - Specifies the default value
Define a search field (like a site search, or Google
search):
Search Google: <input type="search" name="googlesearch">
Input
Type: tel
The tel type is used for input fields that should contain a
telephone number.
Below example allow only 10 digits mobile number.
Telephone: <input type="tel"
name="tel" pattern="\d{10}" required />
