All this HTML5 form malarkey is all well and good. There seems however, to be two things that put a serious dent in our ability to use them: disparity between how supporting browsers implement the features, and how to deal with browsers that don't support the features at all.

If you need to support some of these features in older or non-supporting browsers then consider Webshims Lib, which you can download at http://afarkas.github.com/webshim/demos/. It is a polyfill library written by Alexander Farkas that can load form polyfills to make non-supporting browsers handle HTML5 based form features.

The handy thing about Webshims is that it only adds polyfills as needed. If being viewed by a browser that supports these HTML5 features natively it adds very little. Older browsers, although they need to load more code (as they are less capable by default), get a similar user experience, albeit with the relevant functionality created with the help of JavaScript.

But it isn't just older browsers that benefit. As we've seen, many modern browsers haven't implemented the HTML5 form features fully. Employing Webshims lib to the page also fills any gaps in their capability. For example, Safari doesn't offer any warning when a HTML5 form is submitted with required fields empty. No feedback is given to the user as to what the problem is: hardly ideal. With Webshims lib added to the page, the following happens in the aforementioned scenario.

So when Firefox isn't able to provide a spinner for a type="number" attribute, Webshims lib provides a suitable, jQuery powered, fallback. In short, it's a great tool, so let's get this beautiful little package installed and hooked up and then we can carry on writing forms with HTML5, safe in the knowledge that all users will see what they need to use our form (except those two people using IE6 with JavaScript turned off—you know who you are—now pack it in!).

First download Webshims lib (http://github.com/aFarkas/webshim/downloads) and extract the package. Now copy the js-webshim folder to a relevant section of your web page. For simplicity, for this example I've copied it into the website root.

Now add the following code into the section of your page:

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
  //request the features you need:
  webshim.polyfill('forms');
</script>

Let's go through this a section at a time. Firstly, we link to a local copy of the jQuery library (get the latest version at www.jquery.com) and the Webshim script:

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>

Finally, I'm telling the script to load all needed polyfills:

<script>
  //request the features you need:
  webshim.polyfill('forms');
</script>

And that's all there is to it. Now, missing functionality is automatically added by the relevant polyfill. Excellent!