TheDotProduct

Web-tech nerd stuff

JSH5F – A Javascript method to enable HTML5 Form Elements in Browsers which support them

In a continuation of my recent investigations into HTML5, I have been looking at HTML5 forms (sometimes referred to as Web Forms 2). HTML5 offers (currently) 13 completely new input types for forms (there are also some changes to several existing input elements), some of which look like they will be really useful:

  1. search (for search forms)
  2. number
  3. range (a numeric range)
  4. color
  5. tel (telephone number)
  6. url
  7. email
  8. date (date only, no time)
  9. month (Jan, Feb etc.)
  10. week (week of year)
  11. time (timestamp)
  12. datetime (absolute date/times)
  13. datetime-local (local date/times)
  14. The problem is, at the time of writing virtually no Browsers support these new input types (the only one I have on my Mac which supports them is Opera 10.10) and it’s going to be quite some time before we can even begin to think about relying on Browser support. But, I can’t imagine it will be long until Mozilla/Firefox and Webkit/Safari/Chrome add support. That got me thinking, it’s a shame we can’t make some use of the new HTML5 input types now…

    So, I did a little investigatory work and by borrowing some excellent Javascript detection techniques (a really good article, in fact so good I don’t think there’s any point in me covering the same ground so if you;’re interested in the detection methods, I’d refer you to that article), I came up with a script which uses unobtrusive Javascript and W3C compliant HTML to convert standard type=”text” inputs to the new HTML5 input types! Hopefully this will be of some use to someone – please note that JavaScript is not exactly my forte, so if anyone who is reading is willing and able to contribute improvements to JSH5F, they will be gladly received!

    NOTE: Since Browsers should default to type=”text” for any non-specified or mal-specified inputs, you could in theory just start using the new input types but this script offers you the chance to use the new HTML5 input types with a little less risk of unruly behaviour from older browsers and a simpler, cross-browser method of styling the HTML5 input types differently. I have also just updated the jsh5f.js JavaScript file to allow appending of a string to the name attribute of the input element (using the “name_suffix” variable near the top of the jsh5f.js script) – this important distinction allows you to very simply distinguish between converted and non-converted inputs which can be important as the new HTML5 input elements often supply data in a different format to a standard text input (see my post describing HTML5 input types and their data formats for more information).

    JSH5F Examples

    The script is really simple to use, you simply add a class of (by default) “h5f_input_NEW_INPUT_TYPE” to the class attribute of your input element. For example you could create the following markup which would convert a standard text input to an HTML5 date input:

    <input type="text" class="textbox h5f_input_date" name="some_name" />
    

    You can then ask the script to add further attributes to your converted HTML5 input element by adding (by default) “h5f{JSON_STYLE_STRING_OF_KEY/VALUE_PAIRS}” for example you could create the following markup which would convert a standard text input to an HTML5 range input:

    <input type="text" class="textbox h5f_input_range h5f{min:-100,max:200,step:10}" name="some_name" />
    

    Since your inputs will be transformed into HTML5 inputs on supporting browsers, you might want to style the converted HTML5 inputs a bit differently – You can do this by adding a CSS class which by default is prefixed with “h5fadd” for example if you want to add the CSS class “html5_range” to a range input you would create the following markup:

    <input type="text" class="textbox h5f_input_range h5f_add_html5_range h5f{min:-100,max:200,step:10}" name="some_name" />

    There is a simple working example of jsh5f.js here (Please note: as far as I know, JSH5F will currently only work on Opera 10 as only Opera 10 supports the necessary HTML5 for input types)

    Notes:

    Download

    The code itself is hosted on Google code: Google Code Project jsh5f

    A Brief troubleshooting guide

    References and further reading:

    Created: Wed, 24 Mar 2010 16:00:00 GMT
    Last modified: Wed, 24 Mar 2010 16:00:00 GMT