HTML5 brings us thirteen new input types that you can use to help validate user input as well as how to present the form in the browser.
As of this writing, not all of the major browsers support the new input types. Chrome, Opera, and Safari have the most support.
Please note that the HTML5 specification is still being developed, so this information can change.
HTML 4.01 Input Types
Prior to the introduction of HTML5, HTML 4.01 supports ten different input types. These input types are still supported in HTML5.
| Input Type | Description |
|---|---|
Button | Defines a clickable Button |
Checkbox | Defines a checkbox |
File | Defines a file select button |
Hidden | Defines a hidden input field |
Image | Defines an image as the submit button |
Password | Defines a password field |
Radio | Defines a radio button |
Reset | Defines a reset button that clears all form fields |
Submit | Defines a submit button |
Text | Defines a single line text field |
HTML5 <input> Types
Note: In the case where an older browser visits your page with the new input types and attributes, the input type will default to type="text", so you do not have to worry about compatibility issues.
This is the key is that you can still make use of HTML5 forms today. If you use a new input type, like email or search, browsers with no support for the new input type will simply present users with a standard text field.
Input Type: color
The color type is used for input fields that should contain a color.
Select a color: <input type="color" name="favColor">Input Type: date
The date type allows the user to select a date.
Select a date: <input type="date" name="myDate">Input Type: datetime
The datetime type allows the user to select a date and time, with a time zone.
Select a date and time: <input type="datetime" name="myDatetime">Input Type: datetime-local
The datetime-local type allows the user to select a date and time, without a time zone.
Select a date and time: <input type="datetime-local" name="myDatetime-local">Input Type: email
The email type is used for input fields that should contain an e-mail address. Enter a value in the input box. The value is validated when submitted.
E-mail: <input type="email" name="emailAddr">Input Type: month
The month type allows the user to select a month and year.
Month and year: <input type="month" name="myMonth">Input Type: number
The number type is used for input fields that should contain a numeric value. Additional attributes can be used to restrict numbers allowed.
Choose Number (1-10): <input type="number" name="myNumber" min="1" max="10">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.
Choose Number (1-10): 1 <input type="range" name="myRange" min="1" max="10"> 10Input Type: search
The search type is used for search fields.
Search: <input type="search" name="mySearch">Input Type: tel
The tel type is used for entering a telephone number.
Telephone: <input type="tel" name="myTelephone">Input Type: time
The time type is used for selecting the time.
Time: <input type="time" name="myTime">Input Type: url
The url type is used for input fields that should contain a URL address. Some clients, such as iPhones will change the keyboard to adjust for URL keys, such as “.com”.
URL: <input type="url" name="myURL">Input Type: week
The week type allows the user to select a week and year.
Week: <input type="week" name="myWeek">
