9 HTML5 Features that will make our UI code cleaner by removing lot of Javascript

HTML5 Specs are out and all the leading browsers are making sure that they are compatible with it. As a web developer, we always need a lot of javascript for HTML form validation. I like some of these features that will reduce the javascript functions in the web page and make our page load faster.

1. <input type=”number”> <input type=”tel”>

Most of the web forms these days have zip code and mobile numbers field and to avoid user entering wrong values, javascript is required to either validate the field value on form submit or restrict the users to enter only numbers in the text field. Use of this input type will make sure that only numbers can be entered in the field. Input type tel is for telephone numbers validation and currently not implemented by any of the leading browsers.

2. <input type=”date”> and <input type=”time”>

Whether you are buying flight ticket or setting your date of birth, most of the web page uses third party JavaScript APIs to create Calendar but in HTML5 it will be very easy with date and time input types. There are some other input types related to date i.e datetime, month and week.

3. <input type=”color”>

This will also save a lot of javascript code where we need to pick any color.

4. <datalist> element and list attribute

We use <select> and <option> to provide drop down list of options to choose from BUT if we want to provide user a list of suggested options as well as he is able to type his own, it requires a lot of javascript code. Using these elements will remove that part of JS from our code.

5. <input type=”email”> and <input type=”url”>

No need to validate email and urls as these input types will automatically take care of it for you.

6. placeholder attribute

For user convinience its not a bad idea to have placeholder content in the text field to tell the user what is expected in that field. This feature requires javascript onfocus and onblur (resetting to default if empty). Use of placeholder attribute will automatically take care of all these.

7. autofocus attribute

Using this attribute we can automatically focus on the form field when page is loaded. There should be only one autofocus attribute used in the complete page.

8. required attribute

This attribute make sure that the field value is entered before the form gets submitted.

9. pattern attribute

Using this attribute make sure that the particular field value matches the given pattern format.

I have checked above mentioned HTML5 features across the browser and below is the results in tabular format. Please note that in Safari, after Datalist nothing was getting rendered, so for testing purpose I moved that as the last element in the form and then tested all the features. And yeah I haven’t checked it with IE9 because I don’t use IE at all and I was facing issue with installing IE9. If you are curious to know the results for IE9, go ahead with the source code and test it and share the results with us.

<!DOCTYPE html>

<html lang="en">  <head>  <meta charset="utf-8">  <title>JournalDev - HTML5 Test</title>  </head>
<body>
<form action="" method="post">
1. Number:   <input name="num" type="number" /> <br/>

2. Telephone:   <input name="telephone" type="tel" /> <br/>

3. Date:   <input name="dt" type="date" /> <br/>

4. Time:   <input name="time" type="time" /> <br/>

5. Color:   <input name="color" type="color" /> <br/>

6. Datalist:<input type="text" list="testdata" /> <datalist id="testdata"> <option label="Mr" value="Mister"> <option label="Mrs" value="Mistress"> <option label="Ms" value="Miss"> </datalist> <br/>

7. Email: <input id="email" name="email" type="email" /> <br/>

8. URL: <input id="url" name="url" type="url" /> <br/>

9. Placeholder: <input name="firstname" type="text" placeholder="Pankaj"/> <br/>

10. Autofocus: <input name="lastname" type="text" autofocus/> <br/>

11. Required:   <input name="userid" type="text" required/> <br/>

12. Pattern: <input type="text" name="username" id="username" placeholder="5 <> 10" pattern="[A-Za-z]{5,10}"/> <br/>

<button type="submit"> Submit Form </button>
</form>
</body>
</html>

Cross Browser Test Results:

HTML5 Features Firefox 4 beta 11 Opera 11.01 Safari 5.0.3 Chrome 9.0.597.98
Number Not Working, allowed to enter anything Not working, Text field with Spinner Control but allows non integer data Not working, coming as text input Working and “e” is allowed to enter(e is for having scientific numbers)
Telephone Not working, coming as text input Not working, coming as text input Not working, coming as text input Not working, coming as text input
Date Not working, coming as text input Working Not working, coming as text input Not Working, spinner is coming but text entry is allowed
Time Not working, coming as text input Not Working, allowed to enter time that is not in range, for example 25:70 Not working, coming as text input Not Working, spinner is coming but text entry is allowed
Color Not working, coming as text input Working Not working, coming as text input Not working, coming as text input
Datalist Working but list gets populated when double-clicked or type the initials (M in my case) Working Not working, coming as text input Not working, coming as text input
Email Working Working Not working, coming as text input Not working, coming as text input
URL Working but only if URL contains http://. I liked Opera approach more than Fierfox. Working. Good to see that it’s appending http:// automatically. Not working, coming as text input Not working, coming as text input
Placeholder Working Working Working Working
Autofocus Working Working Working Working
Required Working Working Not Working Not Working
Pattern Working Working Not Working Not Working

Conclusion: Opera supports more HTML5 features than other browsers. However, its very early to use HTML5 features because all the leading browsers are still not fully supporting all the features, so we will have to come up with even more code for old browser support. But its better to know these features and wish that all the browsers support them in the near future.

Request

I was not able to test with IE9 because of some issue with installation. If anybody can take the code and provide the results for IE9 browser, I will be really grateful for that.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *

Subscribe to JournalDev Newsletter
Get the FREE access to Monthly Newsletter and Free PDF eBooks
*No Spam Guaranteed. By entering your email address, you agree also subscribing to our newsletter.
Oops! - Something went wrong.
Close
Limited Time Offer: Hadoop PDF eBook Free Download Now
Exclusive Offer: Citrix™ Whitepaper on Denial of Service Attack Download Now