HTML 5 New Form Elements and its Benefits

January 28, 2012 | By kiranbadi1991 | Filed in: Browser, Development.

HTML 5 has some fantastic changes to the form elements which I feel is surely going to make the life of the developers somewhat easy as now they might have to write less code to do some of form validation work. Use of these HTML Tags as part of form means you write less code and do less amount of testing since the real implementation and validation is now done by the browsers.

In all there should be around 10 to 15 new form HTML tag elements which I feel is going to be implemented as part of HTML 5 Specs. Below are the some of the new form elements which I feel are going to be introduced in HTML 5,

· search – This is going to be used for Search text field.

· tel – This is going be used as text field which will accept telephone numbers. It also has pattern attribute to customize according to one’s requirement.

· url – This field is going to accept the url of the site.

· email – This field will accept only email addresses. It has the attribute which can accept multiple email addresses in the same field.

· color – Shows up the color picker control.

· number – This field designed to accept the numerical input. It supports the pattern wherein the user can be restricted to give only numbers in the field.

As of now these HTML 5 elements are not fully supported by browsers, but I have tested this in latest version of Google chrome and Firefox, they do support these tags.

Below is the sample code which I tried in chrome and Firefox,

<meta charset="utf-8">
<title>HTML5 Form Elements</title>

<form method="post" enctype="multipart/form-data" name="form1">
        <label for="search">Search:</label>
        <input type="search" name="Search" id="idsearch">
        <label for="tel">Phone:</label>
        <input type="tel" name="Phone" id="idphone">
        <label for="url">Website Details:</label>
        <input type="url" name="website" id="idurl">
        <label for="email">Email:</label>
        <input type="email" name="email" id="idemail" multiple>
        <label for ="number"> Lucky Number : </label>
        <input type="number" name="luckynumber" pattern="int">
        <label for="color">Select color:</label>
        <input type="color" name="colorn" id="idcolor">
        <input type="submit" name="send" id="send" value="Submit">


Don’t me believe, copy paste this code in notepad and save it as html document and open this in Firefox and chrome and use your testing mind and see for yourself how much testing and development efforts you can save when you use these tags as part of your development practice.

Tags: , ,

Comments are closed here.