Child

HTML5 Input Types



HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow better input control and validation.

This chapter covers the new input types:

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

Note: Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.

Input Type: color

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

OperaSafariChromeFirefoxInternet Explorer

Example

Select a color from a color picker:

Select your favorite color:


Select your favorite color: <input type="color" name="favcolor">

Input Type: date

The date type allows the user to select a date.

OperaSafariChromeFirefoxInternet Explorer

Example

Define a date control:

Birthday:


Birthday: <input type="date" name="bday">

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):


Birthday (date and time): <input type="datetime" name="bdaytime">

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):


Birthday (date and time): <input type="datetime-local" name="bdaytime">

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:


E-mail: <input type="email" name="usremail">

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):


Birthday (month and year): <input type="month" name="bdaymonth">

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):


Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

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: 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):

Points:



<input type="range" name="points" min="1" max="10">

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:


Search Google: <input type="search" name="googlesearch">

Input Type: tel

OperaSafariChromeFirefoxInternet Explorer

Example

Define a field for entering a telephone number:

Telephone:


Telephone: <input type="tel" name="usrtel">

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:


Select a time: <input type="time" name="usr_time">

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:


Add your homepage: <input type="url" name="homepage">

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:


Select a week: <input type="week" name="week_year">

HTML5 <input> Tag

Tag Description
<input> Defines an input control