Today we will look into some HTML5 features that will help us in removing a lot of boilerplate code.
HTML5 Specs are out and all the leading browsers are supporting these tags.
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 on the web page and make our page load faster.
Table of Contents
HTML5 Features
HTML5 has brought a lot of improvements to help programmers. We will look into some HTML5 features that you should use in the HTML code.
1. input
Let’s look at some new input type introduced in HTML5.
<input type="number"> <input type="tel">Most of the web forms these days have a 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.<input type="date"> and <input type="time">Whether you are buying a 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.<input type="color">This will also save a lot of javascript code where we need to pick any color.<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.
2. datalist
We use <select> and <option> to provide a drop-down list of options to choose from BUT if we want to provide the user a list of suggested options as well as he is able to type his own, it requires a lot of javascript code. Using HTML5 datalist element will remove that part of JS from our code.
3. placeholder attribute
For user convenience, it’s 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.
4. autofocus attribute
Using this attribute, we can automatically focus on the form field when the page is loaded. There should be only one autofocus attribute used in the complete page.
5. required attribute
HTML5 required attribute make sure that the field value is entered before the form gets submitted.
6. pattern attribute
Using html5 pattern attribute make sure that the particular field value matches the given regular expression format.
HTML5 Features Example
Let’s look at a simple HTML5 features example page.
<!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>
You can test these html5 features with different inputs and see if it works or not.
Hello there, You’ve done an incredible job.
I will certainly digg it and personally suggest to my friends.
I’m sure they will be benefited from this web site.
Your blog is one of the best blogs for the HTML purpose. While searching over the internet I find this you can also visit over there.
I try this code in Internet Explorer 9. But it did not working on IE.
IE9 is too old, either use Modern browsers like Firefox, Chrome or use latest IE version, it depends on the feature supported by the browser.
Hi there would you mind letting me know which web host you’re using? I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot quicker then most. Can you recommend a good web hosting provider at a honest price? Thanks, I appreciate it!
I was recommended this website via my cousin. I am no longer sure whether or not this submit is written by way of him as no one else recognize such targeted approximately my problem. You’re wonderful! Thank you!
Why you didn’t include IE9?
Please see the request made. I was not able to test it with IE9 because of installation issues.
e can be entered in Chrome? How en-‘light’-ened of Google!
Why isn’t IE9 in your list?
/dag
Good Point Dag. Actually I was facing some issue with installing IE9 on my Windows 7 64-bit Ultimate OS. So I was not able to carry the test with IE9. Also I don’t like their installation procedure.
If you have IE9 setup, could you please test the html code and provide results here?
Even if some of the features are supported by the browsers, developers will start using it only after some time because most of the applications do the validation using javascript, not all the clients are using the latest browser. Again we need to rewrite the code to support those features supported by browser.
That’s what my conclusion is at the end of the article.
did’nt read the conclusion. thanks. 🙂
> Working and “e” is allowed to enter(?)
because 12e34 is a number.
agreed but there is some problem with that. We can type multiple e, for example “eee” and after that if we move to other field it disappears. You can check that out…
Got the point. Thanks for pointing out. 🙂
In addition to 1) Number: e would be valid if you want to support the so called scientific notation.
Well done!