HTML5 Features – input, required, pattern, datalist

Filed Under: HTML
html5 features, html5 input, html5 required, html5 pattern, html5 datalist

Today we will look into HTML5 features that will help us in removing a lot of boilerplate code. 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 on the web page and make our page load faster.

HTML5 Features

html5 features, html5 input, html5 required, html5 pattern, html5 datalist

HTML5 has brought a lot of improvements to help programmers. We will look into some HTML5 features that you should use it whenever you can.

HTML5 input

Let’s look at some new input type introduced in HTML5.

  1. <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.

  2. <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.

  3. <input type="color">

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

  4. <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.

HTML5 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.

HTML5 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.

HTML5 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.

HTML5 required attribute

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

HTML5 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.

Comments

  1. Vishal Gupta says:

    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.

  2. Atul Goyal says:

    I try this code in Internet Explorer 9. But it did not working on IE.

    1. Pankaj says:

      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.

  3. Tena Zierdt says:

    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!

  4. Singapore Web Design, Singapore SEO, Singapore Internet Marketing says:

    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!

  5. AlexSSE says:

    Why you didn’t include IE9?

    1. Pankaj says:

      Please see the request made. I was not able to test it with IE9 because of installation issues.

  6. Andrew says:

    e can be entered in Chrome? How en-‘light’-ened of Google!

  7. Dag says:

    Why isn’t IE9 in your list?
    /dag

    1. Pankaj says:

      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?

  8. Lakshman says:

    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.

    1. Pankaj says:

      That’s what my conclusion is at the end of the article.

      1. Lakshman says:

        did’nt read the conclusion. thanks. 🙂

  9. mandev says:

    > Working and “e” is allowed to enter(?)
    because 12e34 is a number.

    1. Pankaj says:

      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…

      1. Pankaj says:

        Got the point. Thanks for pointing out. 🙂

  10. knalli says:

    In addition to 1) Number: e would be valid if you want to support the so called scientific notation.

  11. azerty says:

    Well done!

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages