Understanding HTML5 Input Types to Spice up your Forms

Input Type: email
Email input type should be used for fields which should contain email address.
Example:

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

Support:

Input Type: month
Month input type allows user to select month and year
Example:

Birthday month & year: <input type=”month” name=”mnth”>

Support:

Input Type: number
Number input type allows user to select a numeric value
Example:

Age: <input type=”number” min=”18” max=”100” step=”1” name=”mnth”>

Support:

As you can see the number type supports restriction in the form of min and max attributes. You can determine how the numbers can be incremented by setting the step attribute.

Input Type: range
Range input type allows user to select a value from range of numbers. It supports the same restrictions as the number type
Example:

Points: <input type=”rangte” min=”1” max=”5” name=”mnth”>

Support:

Input Type: time
Time input type allows user to select a time.
Example:

Start Time: <input type=”time” name=”mnth”>

Support: