HTML 5 New Form Elements and its Benefits

28 Jan

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,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Form Elements</title>
</head>

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

</body>
</html>

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.

Advertisements

One Response to “HTML 5 New Form Elements and its Benefits”

  1. العاب February 17, 2012 at 6:27 pm #

    Always look for the serious and articles I find in this beautiful site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: