Computers & ProgrammingHTML5Web Development

HTML5 Form Input Types

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 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 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"> 10

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">

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top