HTML5 introduces new Input Types that cover a wide range of input
scenarios. With the new input types web will now have better input control
and form validation. This article will discuss the new input types, their
usage and how they help in validation.
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:
Lohith works in the capacity of Developer Evangelist at Telerik, India and takes care of evangelism in South India. He's an active member and one of the leads for Bangalore DotNet User Group. He tweets:
@kashyapa
