Enhance your web forms with new HTML5 features

by Jean. 32 Comments -

HTML5 introduces numerous new options to create more functional web forms. In this article, I’ll show you exciting new HTML5 features to improve your forms and make them more functional and user-friendly.

Please note that HTML5 is an emerging technique. These examples are not intended for use on a production site. Results may vary according to browser implementation. Please use Chrome or Safari for best results.

Required fields

Whose ever tried to submit a form and gotten an error message saying that you “forgot” to enter your email address? Probably not a lot of us: In fact, 99 percent of all web forms have at least one field marked as required.

In good ol’ HTML, we had to manually display that a specific field is required, most of the time by using a red asterisk. But with HTML5, you can set up a input field to be required:

<input type="text"  name="client_name" required>

And on the CSS side, something like

input:required {
    border: 1px red solid;
}

will save you a lot of time.

Two similar attributes are also available: optional and invalid. They work exactly as the required attribute explained above.

Placeholders

In a form, an input field always has a label explaining what kind of information is required. While you can currently use the label tag to display a label for a specific text field, HTML5 introduces the placeholder attribute. As shown below, using it is pretty simple:

<input name="firstname" placeholder="Please enter your first name">

The HTML5 placeholder attribute works exactly as the value attribute, except that when the user click on the text field, the placeholder text is automatically removed so the user can easily enter his information.

The placeholder attribute currently works only in safari/webkit. Don’t worry about other browsers though, it is pretty easy to simulate placeholders using javascript:

Autofocus

A new HTML5 attribute is named autofocus. If applied to an element, the element will automatically receive the focus once the page is loaded. This can be seen on some sites and most search engines.

Nothing complicated, just use the syntax below, and remember that in HTML5, there’s no more need for attributes to have a value like in XHTML 1.0.

<input name="search" autofocus>

Email fields

Asking someone’s email on a web form is extremely common because email is still the easiest way to contact someone over the internet. HTML5 introduces a new type for the input element, named email.

<input name="email" type="email">

Pattern attribute

When validating a web form, we have to validate the data entered by the visitor. The new pattern HTML5 attribute allows you to define a regular expression pattern. Only the data that matches the defined pattern will be validated. If the data doesn’t match the pattern, then the form will not be submitted.

This is, in my opinion, an extremely good thing, which will save lots of time to developers when coding forms. Though, remember that you should always validate data on the server side as well.

<input type="text" name="Phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>

Url fields

Nowadays, many people have a website, blog, or at least a Twitter profile. This is why many web forms offer the possibility to enter an url.

HTML5 introduces a new type for the input element, designed specifically for entering urls:

<input name="url" type="url">

Although I didn’t test it myself, I heard that the W3C validator will raise an error if the value of a url field doesn’t match a proper url structure.

Date pickers

Many businesses are offering an appointment request through their website. In that case, the visitor has to specify the day they would like an appointment. HTML5 introduces the date type for the input element:

<input name="day" type="date">

When clicked, the date attribute will display a date picker so visitors will simply have to choose a date instead of entering it manually. Unfortunately, except in Opera, most browsers don’t have it implemented yet.

Note that a date picker can be implemented on your forms using the following types:

<input type="date">
<input type="datetime">
<input type="month">
<input type="week">
<input type="time">

Isn’t that user friendly? Personally, I can’t wait to implement this in my forms but as I said earlier this isn’t very well implemented in browsers at the time of writing this post. Of course, Javascript is always here to help. On this site I found a simple fallback implementation for the input type=date HTML5 attribute:

var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
    // No HTML5 native date picker support, use jQuery or your favorite framework to create one.
}

Search boxes

To enhance ease of retrieving information, many websites have implemented their own search engine. HTML5 has created a new type for search fields.

<input name="q" type="search">

For now, the only difference with regular text inputs is that, if you use Safari, the search box will have rounded corners. But maybe interesting functionalities will be implemented in the future. Let’s hope, because right now I have to admit that I don’t really see why we should use this type.

Sliders type and step attribute

HTML5 is also introducing sliders: A new type for the input element, which allows visitors to easily select a number instead of entering it manually.

<input name="number" type="range" min="0" max="10">

The example above allows the visitor to choose a number between 0 and 10. If you want the slider to be incremented/decremented 2 by 2, you’ll have to use one more new attribute: step. Here is an example:

<input name="number" type="range" min="0" max="10" step="2" >

That way, visitors will only be able to select numbers like 0, 2, 4, and so on.

  • http://andrewchamp.com Andrew Champ

    Hello Jean, Chris Coyier from CSS-Tricks showed something you could do w/ the search input.

    Autosave, magnifing glass, drop-down previous results.

    http://css-tricks.com/webkit-html5-search-inputs/

  • http://pippinspages.com Pippin

    Excellent Jean-Baptiste. I can’t wait until HTML5 is fully supported in everything.

  • voxel

    Great stuff but some demos wouldn’t hurt.

  • http://www.iport.it Diego Perini

    I recently published a Javascript HTML form enhancer for older browsers that do not support these new features. It adds support for the following attributes: “placeholder”, “required”, “pattern”, “autofocus”, “maxlength” and an additional non standard “regex” attribute (char ranges).

    See a preview here (will be on GitHub soon):

    http://dl.dropbox.com/u/598365/html5forms/html5forms.html

    I wrote it to be completely library agnostic and completely independent from styling rules. You can actually enhance the outcome with simple CSS rules as you would in newer browsers. There is only one example at the moment. Should work on any form with or without stylesheets. It was written to load once and enhance all the forms in the page but this has not been thoroughly tested yet.

  • http://rjjohnston.me RJ

    Awesome post, much appreciated!!

  • http://www.twimage.net/ kartoshin

    You copy-pasted the example from Url fields into Date pickers and forgot to change type. I didn’t get it at first :)

    • http://www.wprecipes.com Jean-Baptiste Jung

      Mistake has just been corrected. Thanks for letting me know!

  • http://www.codeforest.net/ Codeforest

    Thanks for the great tips, Jean.

    @Diego Very nice resource, thanks for sharing

  • Pingback: Сижу, думу думаю… – Херсонский бомжара

  • Pingback: HTML5 et formulaire | JimmyRoy.fr

  • Sahil Dave

    Awesome post. Thanks for sharing all this info..!

  • Daniel

    Do browsers support these features already? Is it safe to use them?

  • RazorX

    HTML 5 implementation is currently a waste of time if you still need JavaScript to catch all of the browsers that don’t support these HTML 5 features (especially for required form fields). All of these so-called new features are actually just old features already available in JavaScript.

    It’s going to take a good 5 years before there are enough HTML 5 compatible browsers around. The primary problem is that developers are quick to upgrade, while the general populace is not. In fact, in the latest stats (en.wikipedia.org/wiki/Usage_share_of_web_browsers) 52% are still using non-HTML 5 compatible browsers IE 6, 7, 8, for example. Even when IE 9 comes out it will take years for general pop to upgrade to it.

    • http://www.wprecipes.com Jean-Baptiste Jung

      As stated in the beginning of this post, the demonstrated techniques are experimental and are not intended to be used on a production website.

    • http://www.forepoint.co.uk lewismc

      If all adopters of new technologies thought like this there would be no evolution within the industry. Imagine if early television production companies decided to hold off filming in colour until everyone had traded their black and white one to a colour set.
      Opting to use HTML5 now, despite the necessity to use JavaScript for older browsers, merely tells the browser developers this is the direction the industry should be going and dangles that carrot to the older browser users that there is something better in turn increasing the demand on those browsers (ahem Microsoft) to distribute their latest version to the general populace.

      • http://www.wprecipes.com Jean-Baptiste Jung

        I agree with you. And even if you don’t use it today, it’s great to start learning a new technology right now. Developers have to learn everyday in my humble opinion.

    • Beau Vass

      Agree with JB and lewis also. It is not a waste of time (unnecessary maybe), as you are learning and getting into the habits now. Also, your markup will be more semantic so in the future if/when screen readers, programs, spiders, and other robots (or people) are accessing the code, it will be able to better interpret your code. Perhaps if these features become important to how programs interact with web sites your site will be ready to go instead of maybe having to go back and put in all the HTML 5 features. Maybe, maybe not, but regardless it is the individuals choice. I just don’t think it correct to say it is a waste of time to implement it right now. The only reason against it that I can think of is a bit of extra time involved (at first), but once it becomes 2nd nature to you it won’t take long.

    • RazorX

      For forms server-side scripting (PHP, JSP, .NET, Python, etc.) is still the only secure and reliable way to code forms. Client-side scripting is unsecure and unreliable. Turn Javascript off (jQuery dies), for example, and all checks get bypassed. HTML5 can also be easily bypassed because the markup is viewable client-side. The form can be downloaded and re-written as desired and then re-submitted with all checks bypassed or with malicious code input into the fields.

  • http://home.b2bweb.fr Molokoloco

    In my opinion, html5 is also a xhtml format…
    …so i think you don’t write
    #input name=”search” autofocus#
    but
    #input name=”search” autofocus=”autofocus”#
    See “2.4.2 Boolean attributes”dev.w3.org/html5/spec/common-microsyntaxes.html#boolean-attributes

    • http://www.forepoint.co.uk lewismc

      XHTML is XML (based) and is meant to extend HTML and is not ‘true’ HTML – although provided a more semantic and structured set of rules than HTML4.01. Serving HTML to a web server is arguably a more valid method than using XHTML.
      HTML5 allows you to write code following XHTML ‘rules’ and HTML ones – From your link: “You can also mix styles”

  • Jimmi Westerberg

    In Safari 5 gives the small “delete current text” when typing.

    Nice post btw.

    • Jimmi Westerberg

      … the input type=”search”…

  • http://yonglin.sg yonglin

    Nice article! Thanks for sharing!

  • http://braincracking.org jpvincent

    about the test made on the date field : you just check if the browser knows that field, not if a date picker UI has been made (Opéra being the only to display a native date picker widget)

    Actually I’m searching for a way to detect that and didnt found anything for now

  • http://williamchen.org William Chen

    I am absolutely loving your HTML5 Articles! they really sure you what can really be done with it, amazing and keep it up!

  • http://www.careerfield.org Careerfield

    Thanks for the great article. It seems like html5 is going to be much sexier for the view which for my purposes always helps. Thanks for the great updates and tricks

  • http://sokkz.com/ sokkz

    Thanks for the write-up. I’m seriously looking forward to HTML5 being well-supported.

  • http://hubshout.com/?SEO-USA-vs-off-shore&AID=89 Jason

    These are really good tips, I guess it will increase the speed of the website and as well help about SEO. HTML5 seems to be very easy and without writing too much code.

  • http://www.sparsh-technologies.com/ Sparsh

    The Usage of HTML5 is just similar as HTML format but there are some more elements and attributes that reflect the typical usage on modern websites. Here you have posted some simple examples which helpful new user. Thanks for sharing !!

  • http://www.masoom.us Masoom Tulsiani

    HTML5 and CSS3 is acting like a clairvoyant – for what we have in future. Rounder corners, Autofocus & Text shadow excites me.

    I see brands like Nike, using HTML5 on their site. Wonder if their is a tweak, via which a standard version of the site, be displayed in IE 6,7 & 8 and it’s HTML5 compliant version be displayed on Chrome & Safari.

    Maybe we should give users the option, to switch to both version. Like we have for flash sites.

    - Masoom Tulsiani, UI Consulant & Web developer based in Mumbai, India

  • http://www.theraisak.com Theraisa K

    These will be great once they become common/standard, it will definitely make things much easier!

  • http://appnyt.dk Jonas

    I’m curious. I’ve read in another topic somewhere, that Flash is about to die out, and HTML5 takes over. I’m an upcomming flash chat owner, and would like to know – what’s the odds of Flash dying all off with flash chats out? I know Flash is horrible from an SEO point of view, but HTML can’t be good all over … or can it?