Did you find this useful?
Socialize it today.


HTML5 Form Input Types

Wednesday, October 10, 2012

browser

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. Each item below is tested for support in the current browser. In the items below, green indicates that your current browser should support the type while red indicates that it does not. Please note that the HTML5 specification is still being developed, so this information can change. On the right side of this text, you will notice that this page has detected your browser version.

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 TypeDescription
ButtonDefines a clickable Button
CheckboxDefines a checkbox
FileDefines a file select button
HiddenDefines a hidden input field
ImageDefines an image as the submit button
PasswordDefines a password field
RadioDefines a radio button
ResetDefines a reset button that clears all form fields
SubmitDefines a submit button
TextDefines 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 time zone.

Select a date and time: <input type="datetime" name="myDatetime">

Input Type: datetime-local

The datetime type allows the user to select a date and time, without 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"> 10
1  10

Input 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="telephone" 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">

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML5: The Missing Manual The Definitive Guide to HTML5 Head First HTML5 Programming: Building Web Apps with JavaScript