HTML5 Input Types

## HTML Basic

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML

## HTML5 News

HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE

## HTML Media

HTML Media HTML Object HTML Audio HTML Video HTML YouTube

## HTML Examples

HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate

## HTML References

HTML Tag List HTML Attributes HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts

# 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 »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE