Example

Select a color from a color picker:
Select your favorite color: 

Try it yourself »

Input Type: date

The date type allows the user to select a date.
Opera Safari Chrome Firefox Internet Explorer
Example

Define a date control:
Birthday: 

Try it yourself »

Input Type: datetime

The datetime type allows the user to select a date and time (with time zone).
OperaSafariChromeFirefoxInternet Explorer
Example

Define a date and time control (with time zone):
Birthday (date and time): 

Try it yourself »

Input Type: datetime-local

The datetime-local type allows the user to select a date and time (no time zone).
OperaSafariChromeFirefoxInternet Explorer
Example

Define a date and time control (no time zone):
Birthday (date and time): 

Try it yourself »

Input Type: email

The email type is used for input fields that should contain an e-mail address.
OperaSafariChromeFirefoxInternet Explorer
Example

Define a field for an e-mail address (will be automatically validated when submitted):
E-mail: 

Try it yourself »

Tip: Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options).
Input Type: month

The month type allows the user to select a month and year.
OperaSafariChromeFirefoxInternet Explorer
Example

Define a month and year control (no time zone):
Birthday (month and year): 

Try it yourself »

Input Type: number

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

You can also set restrictions on what numbers are accepted:
OperaSafariChromeFirefoxInternet Explorer
Example

Define a numeric field (with restrictions):
Quantity (between 1 and 5): 

Try it yourself »

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

Try an example with all the restriction attributes: Try it yourself
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.
OperaSafariChromeFirefoxInternet Explorer
Example

Define a control for entering a number whose exact value is not important (like a slider control):


Try it yourself »

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

Input Type: search

The search type is used for search fields (a search field behaves like a regular text field).
OperaSafariChromeFirefoxInternet Explorer
Example

Define a search field (like a site search, or Google search):
Search Google: 

Try it yourself »

Input Type: tel
OperaSafariChromeFirefoxInternet Explorer
Example

Define a field for entering a telephone number:
Telephone: 

Try it yourself »

Input Type: time

The time type allows the user to select a time.
OperaSafariChromeFirefoxInternet Explorer
Example

Define a control for entering a time (no time zone):
Select a time: 

Try it yourself »

Input Type: url

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

The value of the url field is automatically validated when the form is submitted.
OperaSafariChromeFirefoxInternet Explorer
Example

Define a field for entering a URL:
Add your homepage: 

Try it yourself »

Tip: Safari on iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds .com option).
Input Type: week

The week type allows the user to select a week and year.
OperaSafariChromeFirefoxInternet Explorer
Example

Define a week and year control (no time zone):
Select a week: