X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

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

Any input types, not supported by your browser, will behave as regular text types.


Input Type: number

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

You can set restrictions on the numbers.

Depending on browser support, the restrictions can apply to the input field.

Opera Safari Chrome Firefox Internet Explorer

Example

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

Try it Yourself »


Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

Opera Safari Chrome Firefox Internet Explorer

Example

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Try it Yourself »


Input Type: date

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

Depending on browser support, a date picker can show up in the input field.

Opera Safari Chrome Firefox Internet Explorer

Example

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

Try it Yourself »

You can add restrictions to the input:

Opera Safari Chrome Firefox Internet Explorer

Example

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
  <input type="submit" value="Send">
</form>

Try it Yourself »


Input Type: color

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

Depending on browser support, a color picker can show up in the input field.

Opera Safari Chrome Firefox Internet Explorer

Example

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

Try it Yourself »


Input Type: range

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

Depending on browser support, the input field can be displayed as a slider control.

OperaSafariChromeFirefoxInternet Explorer

Example

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Try it Yourself »

You can use the following attributes to specify restrictions: min, max, step, value.


Input Type: month

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

Depending on browser support, a date picker can show up in the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »


Input Type: week

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

Depending on browser support, a date picker can show up in the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »


Input Type: time

The time type allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »


Input Type: datetime

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

Depending on browser support, a date picker can show up in the input field.

Opera Safari Chrome Firefox Internet Explorer

Example

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

Try it Yourself »


Input Type: datetime-local

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

Depending on browser support, a date picker can show up in the input field.

Opera Safari Chrome Firefox Internet Explorer

Example

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

Try it Yourself »


Input Type: email

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

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds ".com" to the keyboard to match email input.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »


Input Type: search

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

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »


Input Type: tel

The tel type is used for input fields that should contain a telephone number.

There is currently no validation support for the tel type in any browser.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »


Input Type: url

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

Depending on browser support, the url field can be automatically validated when submitted

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

OperaSafariChromeFirefoxInternet Explorer

Example

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

Try it Yourself »



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook