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

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:

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