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: url
Url input type allows user to enter a web address.
Example:

Website: <input type=”url” name=”mnth”>

Support:

Input Type: week
Week input type allows user to select a week and year.
Example:

Week: <input type=”week” name=”mnth”>

Support:

We saw all the input types defined in HTML5 and their support by different browsers. One question you might have is what happens if the control is rendered on an older browser. The good news is those browser will treat the control as a normal text input type.

Placeholder Attribute

HTML5 also defines a new attribute which can be used along with all the input types. It is known as placeholder.
Placeholder attribute provides a short hint on the input control. The hint may be the description of the expected value itself. Currently this is supported by all major browsers except Internet Explorer.
Example:

First Name: <input type=”text” placeholder=”enter your first name”>

Support:

Form Validation

One of the important things that the new input types try to solve is the problem of form validation. Here is some of the validation support that these new types provide:
If input type is email, the entered value must be a valid email address. Browser will issue a validation error automatically when you try to submit the form

If the input type used is Url, then the entered value must be a valid domain address. The browser will validate it for us when a form is submitted.

HTML5 brings out a new attribute called “required”. This can be added to any input type. What this does is, if the field is left blank and form is submitted, browser will issue an error and form will not be submitted.


So that sums up pretty much everything about the new input types support in HTML5. Through this post we saw how HTML5 is trying to make sure that the form input controls are standardized and also addressing the need for the validation to be handled by the browsers themselves. Hope this article gives you a head start in understanding the new HTML5 input types, their usage and the benefits they bring to the HTML forms.

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