Understanding HTML5 Input Types to Spice up your Forms

New Input Types

HTML5 has defined 13 new input types which allow better input control and validation. The new input types are:

Now that we know what the new Input types are, let us see how they can be put to use. Following section will outline all the 13 input type usage and their support by the browsers.

Input types Usage

Input Type: color
Color input type is used for fields which should contain a color as their value.

Example:

Select your favorite color: <input type=”color” name=”color”>

Support:

Here is how Opera renders this input control:

Input Type: date
Date input type allows the user to select a date.
Example:

Birthday: <input type=”date” name=”day”>

Support:

Input Type: datetime
Datetime input type allows the user to select a date and time with time zone.
Example:

Birthday (date & time): <input type=”datetime” name=”dt”>

Support:

Input Type: datetime-local
Datetime local input type allows the user to select a date and time without time zone.
Example:

Birthday (date & time): <input type=”datetime-local” name=”dt”>

Support: