HTML5 New Input Types

HTML5 introduces several new input types for forms. These new features provide better input control and validation.

This chapter covers these new input types:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Note: Not all major browsers support the new input types, but you can already use them in all major browsers. If not supported, they will simply display as regular text fields.

Input Type: color

The color type is used for input fields primarily for color selection, as shown below:

Example

Select a color from the color picker:

Input Type: date

The date type allows you to select a date from a date picker.

Example

Define a date controller:

Input Type: datetime

The datetime type allows you to select a date (UTC time).

Example

Define a date and time controller (local time):

Input Type: datetime-local

The datetime-local type allows you to select a date and time (no timezone).

Example

Define a date and time (no timezone):

Input Type: email

The email type is used for input fields that should contain an email address.

Example

Automatically validates the email field's value for legality upon form submission:

Tip: Safari on iPhone supports the email input type and adjusts the touchscreen keyboard to suit it (adding @ and .com options).

Input Type: month

The month type allows you to select a month.

Example

Define month and year (no timezone):

Input Type: number

The number type is used for input fields that should contain a numeric value.

You can also set restrictions on the accepted numbers:

Example

Define a numeric input field (with restrictions):

Use the following attributes to specify restrictions on the numeric type:

Try an example with all restriction attributes Try it

Input Type: range

The range type is used for input fields that should contain a numeric value within a specific range.

The range type is displayed as a slider.

Example

Define a numeric value that does not require high precision (similar to a slider control):

Use the following attributes to specify restrictions on the numeric type:

• 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, such as site search or Google search.

Example

Define a search field (similar to site search or Google search):

Input Type: tel

Example

Define an input field for a telephone number:

Input Type: time

The time type allows you to select a time.

Example

Define a time controller (no timezone):

Input Type: url

The url type is used for input fields that should contain a URL.

Upon form submission, the url field's value is automatically validated.

Example

Define an input field for a URL:

Tip: Safari on iPhone supports the url input type and adjusts the touchscreen keyboard to suit it (adding .com option).

Input Type: week

The week type allows you to select a week and year.

Example

Define week and year (no timezone):

HTML5 <input> Tag