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.

Comments (32) - Leave yours

  1. Andrew Champ said:

    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/

  2. Diego Perini said:

    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.

  3. RazorX said:

    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.

    • lewismc said:

      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.

    • Beau Vass said:

      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 said:

      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.

  4. Molokoloco said:

    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

    • lewismc said:

      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”

  5. jpvincent said:

    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

  6. Jason said:

    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.

  7. Sparsh said:

    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 !!

  8. Masoom Tulsiani said:

    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

  9. Jonas said:

    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?

Leave a Reply

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

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!