Understanding HTML5 Input Types to Spice up your Forms

Understanding HTML5 Input Types to Spice up your Forms

By | March 10th, 2013
2 Comments on Understanding HTML5 Input Types to Spice up your Forms

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.


														               
							 	 						

\related stories

New Input Types

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

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

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:

Go to Page: 1 2 3 4

Topics: , , , , , , , ,
Google
Lohith Nagaraj
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