HTML5 Input Type


HTML5 has several new form input types. These new features provide better input control and verification.

This chapter comprehensively introduces these new input types:

  • color

  • date

  • datetime

  • datetime-local

  • email

  • month

  • number

  • range

  • search

  • tel

  • time

  • url

  • week

Note: Not all major browsers support the new input types, but you can already use them in all major browsers. Even if it is not supported, it can still be displayed as a regular text field.


Input Type: color

The color type used in the input field is mainly used to select the color, as shown below:

OperaSafariChromeFirefoxInternet Explorer

Example

Choose a color from the color picker:

Choose the color you like: <input type="color" name="favcolor">

 Try It! 


Input Type: date

The date type allows you to select a date from a date picker.

OperaSafariChromeFirefoxInternet Explorer

Example

Define a time controller:

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

 Try It! 


Input Type: datetime

The datetime type allows you to select a date (UTC time).

OperaSafariChromeFirefoxInternet Explorer

Example

Define a date and time controller (local time):

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

 Try It! 


Input Type: datetime-local

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

OperaSafariChromeFirefoxInternet Explorer

Example

Define a date and time (no time zone):

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

 Try It! 


Input Type: email

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

OperaSafariChromeFirefoxInternet Explorer

Example

When submitting the form, it will automatically verify whether the value of the email domain is legal and valid:

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

Tip: The Safari browser in iPhone supports the email input type and adapts it by changing the touch screen keyboard (add @ and .com options).

Try It! 


Input Type: month

The month type allows you to select a month.

OperaSafariChromeFirefoxInternet Explorer

Example

Define month and year (no time zone):

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

 Try It! 


Input Type: number

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

You can also set limits on the accepted numbers:

OperaSafariChromeFirefoxInternet Explorer

Example

Define a numeric input field (limited):

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

 Try It! 

Use the following attributes to specify restrictions on number types:

AttributeDescription
disabledSpecifies that the input field is disabled
max       image.pngSpecifies the maximum allowable
maxlengthSpecifies the maximum character length of the input field
minimage.pngSpecifies the minimum allowed value
patternimage.pngSpecifies the mode used to validate the input field
readonlySpecifies that the value of the input field cannot be modified
requiredimage.pngSpecifies that the value of the input field is required
sizeSpecifies the number of visible characters in the input field
stepimage.pngSpecifies the legal number interval of the input field
valueSpecifies the default value of the input field

Try the sample with all the attributes are defined.


Input Type: range

The range type is used for input fields that should contain numeric values within a certain range.

The range type is displayed as a slider.

OperaSafariChromeFirefoxInternet Explorer

Example

Define a value that does not need to be very precise (similar to a slider control):

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

 Try It! 

Please use the following attributes to specify the restriction on the number type:

  • max-specifies the maximum allowable value

  • min-specifies the minimum allowed value

  • step-specify the legal interval of digits

  • value-specifies the default value


Input Type: search

The search type is used for search domains, such as site search or Google search.

OperaSafariChromeFirefoxInternet Explorer

Example

Define a search field (similar to site search or Google search):

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

 Try It! 


Input Type: tel

OperaSafariChromeFirefoxInternet Explorer

Example

Define the input phone number field:

phone number: <input type="tel" name="usrtel">

 Try It! 


Input Type: time

The time type allows you to select a time.

OperaSafariChromeFirefoxInternet Explorer

Example

Define the time controller that can be entered (without time zone):

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

 Try It! 


Input Type: url

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

When the form is submitted, the value of the url field will be automatically verified.

OperaSafariChromeFirefoxInternet Explorer

Example

Define the input URL field:

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

 Try It! 

Tip: The Safari browser in the iPhone supports the url input type, and adapts it by changing the touch screen keyboard (adding the .com option).


Input Type: week

The week type allows you to select the week and year.

OperaSafariChromeFirefoxInternet Explorer

Example

Define week and year (no time zone):

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

 Try It! 


HTML5 <input> Tag

TagDescription
<input>Describe input tag