HTML5 Input Types

«Previous                                                                                                              NEXT CHAPTER»

---

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.

Example

Select a color from a color picker:

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

Try it yourself »

---

Input Type: date

The date type allows the user to select a date.

Example

Define a date control:

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

Try it yourself »

---

Input Type: datetime

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

Example

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

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

Try it yourself »

---

Input Type: datetime-local

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

Example

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

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

Try it yourself »

---

Input Type: email

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

Example

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

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

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.

Example

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

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

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:

Example

Define a numeric field (with restrictions):

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="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.

Example

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

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

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

Example

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

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

Try it yourself »

---

Input Type: tel

Example

Define a field for entering a telephone number:

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

Try it yourself »

---

Input Type: time

The time type allows the user to select a time.

Example

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

Select a time: <input type="time" name="usr_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.

Example

Define a field for entering a URL:

Add your homepage: <input type="url" name="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.

Example

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

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

Try it yourself »

---

HTML5 <input> Tag

Tag	Description
<input>	Defines an input control

---

«Previous                                                                                                              NEXT CHAPTER»

---

---