HTML5 new input type with examples

HTML5 New Input Types

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

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

Input Type Examples:

Select a color from a color picker:

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

                                                                                                                                                                   

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

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

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

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

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

The time type allows the user to select a time.

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

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

 

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

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

The time type allows the user to select a time.

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

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

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

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

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

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

 

The value of the URL field should contain a URL address and automatically validated when the form is submitted.

Below example allow only http://www.example.example

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

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

Define a numeric field (with restrictions):

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

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.

<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

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

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

 

Input Type: tel

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

Below example allow only 10 digits mobile number.

Telephone: <input type="tel"  name="tel" pattern="\d{10}"  required />