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. Thankfully, as ever, the web community has found a way.
Back in Chapter 4, HTML5 for Responsive Designs I mentioned Modernizr (http://www.modernizr.com), a fantastic JavaScript library that helps insert polyfills for browsers lacking the requisite HTML5/CSS3 features. "Webshims Lib", written by Alexander Farkas (http://afarkas.github.com/webshim/demos/) is built on top of this and the ubiquitous jQuery library to only load the form polyfills (it can handle poly-filling of other HTML5 features too) needed to make non-supporting browsers handle our HTML5 forms. What's particularly great is the fact that as it utilizes Modernizr's loading capabilities, the relevant polyfills are only added if needed. It adds very little flab to a web page if being viewed by a browser that supports these HTML5 features natively. 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 (5.1) doesn't offer any warning when a HTML5 form is submitted with any required fields empty. Whilst the form isn't actually submitted, 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 (v9) 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 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 <head> section of your page:
<script src="js/jquery-1.7.1.js"></script> <script src="js-webshim/minified/extras/modernizr-custom.js"></script> <script src="js-webshim/minified/polyfiller.js"></script> <script> //load all defined $.webshims.polyfill(); </script>
Let's go through this a section at a time. First I've linked to a local copy of the jQuery library (get the latest version at www.jquery.com):
<script src="js/jquery-1.7.1.js"></script>
Next, I'm adding the versions of Modernizr and the polyfiller JavaScript files that are within Webshims Lib:
<script src="js-webshim/minified/extras/modernizr-custom.js"></script> <script src="js-webshim/minified/polyfiller.js"></script>
Finally, I'm telling the script to load all needed polyfills:
<script> //load all defined $.webshims.polyfill(); </script>
And that's all there is to it. Now, missing functionality is automatically added by the relevant polyfill. Excellent!