Understanding HTML5 Input Types to Spice up your Forms

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.