{"id":4728,"date":"2010-07-27T23:50:06","date_gmt":"2010-07-28T03:50:06","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=4728"},"modified":"2012-12-07T10:49:03","modified_gmt":"2012-12-07T14:49:03","slug":"creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2","status":"publish","type":"post","link":"http:\/\/www.useragentman.com\/blog\/2010\/07\/27\/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2\/","title":{"rendered":"Creating Cross Browser HTML5 Forms Now, Using modernizr, webforms2 and html5Forms"},"content":{"rendered":"<div class=\"importantNotes\">\n<h3>Updates:<\/h3>\n<ul>\n<li><strong>Nov 6, 2012: I have written about a proposed extension to the CSS pseudo-classes used by HTML5 Forms<\/strong> in my later blog post <a href=\"https:\/\/www.useragentman.com\/blog\/2012\/11\/05\/css3-pseudo-classes-and-html5-forms-their-limitations-and-a-possible-solution\/\">CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution<\/a>.  The webforms2 library supports these extensions, which may be of interest if you need advanced styling of HTML5 Forms that the specification doesn&#8217;t handle.<\/li>\n<li><strong>May 13, 2012: <em>The scripts mentioned in this article are now part of the <a href=\"https:\/\/github.com\/zoltan-dulac\/html5Forms.js\">html5Forms.js JavaScript library<\/a>.<\/em><\/strong>  It includes a newly refactored version of webforms2, which has an improved validation routine that has been refactored to mimic the behavior of the native implementations of latest versions of Firefox, Chrome and Opera.  It also uses <a href=\"http:\/\/modernizr.com\">Modernizr<\/a> and <a href=\"http:\/\/yepnopejs.com\">yepnope<\/a> to only load the HTML5 Forms features that are not natively supported by the web browser using it.  This article has been updated to reflect those changes &mdash; additional features have also been documented in my follow up blog post, <a href=\"\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms &mdash; Even In Older Browsers<\/a><\/li>\n<li><strong>May 12, 2011:<\/strong> html5Widgets has been <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/05\/12\/fixing-oninput-in-ie9-using-html5widgets\/\">updated to support the <code>oninput<\/code> event<\/a>. <\/li>\n<li><strong>Aug. 6, 2010:<\/strong> An older version of this article was <a href=\"http:\/\/nz.pe.kr\/wordpress\/?p=547\">translated into Korean<\/a>.<\/li>\n<li><strong>Sept. 10, 2010:<\/strong> The webforms2 included with html5Widgets has been modified to fix validation issues with the newer versions of Safari and Chrome.<\/li>\n<\/ul>\n<\/div>\n<div class=\"wp-caption alignright\" style=\"width: 298px; border: solid 3px black;\">\n<div class=\"size-full wp-image-1387\" style=\"width: 288px\">\n<form  action=\"https:\/\/www.useragentman.com\/testForm.php\"  oninput=\"document.getElementById('rangeOutput').innerHTML = document.getElementById('age').value\">\n<table class=\"html5ExampleTable\">\n<tr>\n<th>Name:<\/th>\n<td><input type=\"text\" name=\"fullname\" placeholder=\"Required\" required=\"required\" data-errormessage=\"You must enter in your name.\" \/><\/td>\n<\/tr>\n<tr>\n<tr>\n<th>Age:<\/th>\n<td><input type=\"range\" id=\"age\" name=\"age\" min=\"18\" max=\"150\"\/><output id=\"rangeOutput\">&#8211;<\/output>\t<\/td>\n<\/tr>\n<tr>\n<th>Zip Code:<\/th>\n<td><input type=\"text\" name=\"zipc\" pattern=\"[0-9]{5}([-][0-9]{4})?\" required=\"required\" placeholder=\"Required (e.g. 90210)\" data-errormessage=\"You must enter a proper zip code (e.g. 90210)\" \/>\t<\/td>\n<\/tr>\n<tr>\n<th>Fave Color:<\/th>\n<td><input type=\"color\" \/><\/td>\n<\/tr>\n<tr>\n<th><\/th>\n<td><input type=\"submit\" value=\"Submit\" \/><\/td>\n<\/tr>\n<\/table>\n<\/form>\n<\/div>\n<p class=\"wp-caption-text\" style=\"width: 288px;\">Working example HTML5 Form using <a href=\"http:\/\/www.modernizr.com\">Modernizr<\/a>, <a href=\"https:\/\/github.com\/westonruter\/webforms2\">webforms2<\/a> and my new script, html5Forms.  Go ahead &#8230; try them out.  You know you wanna!<\/p>\n<\/div>\n<p>Calendars, colour swatches, sliding widgets, client side validation: this is the nirvana that the HTML5 forms module promises. Some would say &#8220;So what? I&#8217;ve seen this on the web for years!&#8221;, and they&#8217;d be right. There have been some really brilliant people coding some really interesting widget and validation frameworks, so why should we change?<\/p>\n<ul>\n<li><strong>Ease the markup learning curve:<\/strong> HTML5 form widgets and validation have been built to be as dead simple to markup as a select box with no JavaScript knowledge required<\/li>\n<li><strong>It&#8217;s a W3C standard:<\/strong> so you know that it&#8217;ll work for years to come and if you have problems, you could always ask almost anyone in the web development community for help.<\/li>\n<li><strong>Cellular phone support:<\/strong> HTML5 form fields will have optimized user interfaces appropriate for the type of device.  <a href=\"http:\/\/devblog.blackberry.com\/2010\/03\/use-html5-in-your-blackberry-web-content\/\">Blackberry already has optimized versions of the date\/time and color widgets<\/a> and, according to <a href=\"http:\/\/diveintohtml5.org\/\">Mark Pilgrim&#8217;s<\/a> article <a href=\"http:\/\/diveintohtml5.org\/forms.html\">A Form of Madness<\/a>, the virtual keyboards that appear when using HTML5 form fields are optimized for the data being input.<\/li>\n<li><strong>Web development tools will have to support it:<\/strong> It&#8217;s a safe bet that Aptana, Dreamweaver, and all the other IDEs out there will have HTML5 support.<\/li>\n<li><strong>It&#8217;s HTML5:<\/strong> when you tell your non-techie co-workers that you use it, you will be the envy of all &mdash; after all, it <strong>must<\/strong> be five times better than regular HTML, right?  Your boss will be so impressed that you are now a guru in this futuristic technology with a cool numbered acronym that he or she will give you a big fat raise!!!\n<p>(Okay, okay.  Don&#8217;t try to laugh too hard &#8230; your co-workers will start to worry).<\/li>\n<\/ul>\n<h2>The Support Dilemma<\/h2>\n<p>Unfortunately, today&#8217;s support for the HTML5 Form Module is spotty with each browser supporting different parts of the specification.  Take a look at Wikipedia&#8217;s<a href=\"http:\/\/en.wikipedia.org\/wiki\/Comparison_of_layout_engines_%28HTML5%29#Form_elements_and_attributes\"> HTML5 Forms comparison chart<\/a>.  You&#8217;ll see each browser supporting a different set of features, but not one supports them all.<\/p>\n<h2>But I Want To Use It <strong>Now!!!<\/strong><\/h2>\n<p><strong>Since I am impatient and want to use HTMl5 Forms right now, I put together the html5Forms.js library.<\/strong>  html5Forms uses <code><a href=\"http:\/\/www.modernizr.com\">Modernizr<\/a><\/code> to detect if there is native support for the parts of the HTML5 Forms specification a page wishes to use &mdash; if a browser doesn&#8217;t support the desired feature, html5Forms uses Modernizr&#8217;s <a href=\"http:\/\/yepnopejs.com\">yepnope lazy loader<\/a> to grab some battle-tested third party JavaScript libraries to add support &mdash; html5Forms would not be possible without them.  We shall discuss these scripts while we discuss the different parts of the HTMl5 Forms specification below. <\/p>\n<h2>Form Validation Using the <code>required<\/code> and <code>pattern<\/code> Attributes<\/h2>\n<p>The <code>required<\/code> attribute makes an input field mandatory and forces the user to enter in a value in order to submit the form data.  The markup is simple<\/p>\n<blockquote class=\"code\">\n<pre>&lt;input type=\"text\" name=\"firstName\" value=\"\" required=\"required\" \/&gt;\r\n<\/pre>\n<\/blockquote>\n<p>(<strong>Note:<\/strong>, you can also just use <code>required<\/code> on its own if you aren&#8217;t trying to be XHTML compliant.)<\/p>\n<p>The <code>pattern<\/code> attribute forces the user to enter in a value using a specified format.  It uses <a href=\"http:\/\/en.wikipedia.org\/wiki\/Regular_expressions\">regular expressions<\/a> to define this format. For example, if you want to force the user to input a U.S. Zip Code inside a form field, you would use the following markup.<\/p>\n<blockquote class=\"code\">\n<pre>\r\n&lt;input type=\"text\" name=\"zipCode\" value=\"\"\r\n   pattern=\"[0-9]{5}([-][0-9]{4})?\" required=\"required\"  \/&gt;\r\n<\/pre>\n<\/blockquote>\n<p>Note that <code>required<\/code> and <code>pattern<\/code> are independent from each other.  You can have a <code>pattern<\/code> set on a form field without it being <code>required<\/code>  (i.e. the pattern would only be checked if the user enters in data into the field).<\/p>\n<p>Opera 10+ (mobile and desktop editions) is the only browser that supports the validation routines natively.  To use this in all other browsers, all you need is to include the following script tags in the <code>head<\/code> of your document.<\/p>\n<blockquote class=\"code\">\n<pre> &lt;script type=\"text\/javascript\"\r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\"&gt;\r\n &lt;\/script&gt;\r\n\r\n &lt;script type=\"text\/javascript\"\r\n          <span class=\"hilite\">data-webforms2-support=\"validation\"<\/span>\r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" &gt; \r\n\r\n &lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p>Note the <code>data-webforms2-support=\"validation\"<\/code> in the <code>script<\/code> tag for html5Forms.js.  This tells html5Forms to load Weston Ruter&#8217;s <code>webforms2.js<\/code> (which polyfill html5Forms validation.  However, <strong>it only loads this script if the browser doesn&#8217;t support validation natively<\/strong> (The <code>data-webforms2-support<\/code> attribute can contain other HTML5 Form features in a comma delimited list, but more on that later).<\/p>\n<p>Let&#8217;s take a look at how validation looks in the various browsers:<\/p>\n<table class=\"screenshots\">\n<thead>\n<tr>\n<th><\/th>\n<th>Windows<\/th>\n<th>Mac<\/th>\n<th>Linux<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>Firefox 4.0+<br \/>\n(native support)<\/th>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Windows Firefox\" src=\"\/blog\/wp-content\/uploads\/2012\/04\/validation-firefox4-windows.png\" alt=\"Screenshot of range field for Windows Firefox\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Mac Firefox\" src=\"\/blog\/wp-content\/uploads\/2012\/03\/validation-firefox4-mac.png\" alt=\"Screenshot of range field for Mac Firefox\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Linux Firefox\" src=\"\/blog\/wp-content\/uploads\/2012\/05\/validation-firefox4-linux.png\" alt=\"Screenshot of range field for Windows Firefox\" \/><\/td>\n<\/tr>\n<tr>\n<th>Safari 5.x-<br \/>\n(polyfill)<\/th>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Windows Safari\" src=\"\/blog\/wp-content\/uploads\/2012\/05\/validation-safari-windows.png\" alt=\"Screenshot of range field for Windows Safari \" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Windows Safari\" src=\"\/blog\/wp-content\/uploads\/2012\/04\/validation-safari-mac.png\" alt=\"Screenshot of range field for Mac Safari \" \/><\/td>\n<td>Not Applicable<\/td>\n<\/tr>\n<tr>\n<th>Chrome 17+<br \/>\n(native support)<\/th>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Chrome Windows\" src=\"\/blog\/wp-content\/uploads\/2012\/05\/validation-chrome-windows.png\" alt=\"Screenshot of range field for Chrome Windows\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Chrome Mac\" src=\"\/blog\/wp-content\/uploads\/2012\/03\/validation-chrome-mac.png\" alt=\"Screenshot of range field for Chrome Mac\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Linux Chrome\" src=\"\/blog\/wp-content\/uploads\/2012\/04\/validation-chrome-linux.png\" alt=\"Screenshot of range field for Linux Chrome\" \/><\/td>\n<\/tr>\n<tr>\n<th>Opera 11+<br \/>\n(native support)<\/th>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Windows Opera\" src=\"\/blog\/wp-content\/uploads\/2012\/05\/validation-opera-windows.png\" alt=\"Screenshot of range field for Windows Opera\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Mac Opera\" src=\"\/blog\/wp-content\/uploads\/2012\/04\/validation-opera-mac.png\" alt=\"Screenshot of range field for Mac Opera\" \/><\/td>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Linux Opera\" src=\"\/blog\/wp-content\/uploads\/2012\/04\/validation-opera-linux.png\" alt=\"Screenshot of range field for Linux Opera\" \/><\/td>\n<\/tr>\n<tr>\n<th>Opera 10.10 (native support)<\/th>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/validityOpera.png\" alt=\"[Screenshot of HTML5 Validation using Opera]\" title=\"Screenshot of HTML5 Validation using Opera\"  class=\"alignnone size-full wp-image-1282\" \/><\/td>\n<td>Similar to Windows version<\/td>\n<td>Similar to Windows version<\/td>\n<\/tr>\n<tr>\n<th>IE8<br \/>\n(polyfill)<\/th>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Internet Explorer 6\" src=\"\/blog\/wp-content\/uploads\/2012\/03\/validation-ie8-windows.png\" alt=\"Screenshot of range field for Internet Explorer 6\" \/><\/td>\n<td rowspan=\"2\" colspan=\"2\">Not Applicable<\/td>\n<\/tr>\n<tr>\n<th>IE10<br \/>\n(native support)<\/th>\n<td><img decoding=\"async\" title=\"Screenshot of range field for Internet Explorer 6\" src=\"\/blog\/wp-content\/uploads\/2012\/03\/validation-ie10-windows.png\" alt=\"Screenshot of range field for Internet Explorer 6\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>(Note: Although the validation message bubbles look different in every browser, there is a way to apply a common style.  Read my follow-up post, <a href=\"\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms &mdash; Even In Older Browsers<\/a> for more information.)<\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/patternRequired.html\">See an example of <code>pattern<\/code> and <code>required<\/code> in action.<\/a><\/p>\n<p>Note that the same validation framework checks the values of inputs of type <code>email<\/code>, <code>url<\/code> and <code>number<\/code> to ensure that the values are in their respective valid formats.  As an added bonus, if you are using the iPhone or iPad version of Safari, the virtual keyboard that appears will be optimized for these type of form fields (e.g. when editing a <code>number<\/code> field, the keyboard that appears contains only digits and the &#8220;+&#8221;, &#8220;-&#8220;, and &#8220;.&#8221; keys.  This is native behaviour for iOS, and I hope other mobile browsers, such the Android&#8217;s, follow suit.<\/p>\n<h2>The <code>autofocus<\/code> Attribute<\/h2>\n<p>The <code>autofocus<\/code> attribute allows developers to choose which element has focus when the page is loaded.  The Google front page has done this via JavaScript, and now, 12 years later, there is finally an HTML attribute to easily handle this.<\/p>\n<blockquote class=\"code\">\n<pre>&lt;input type=\"text\" name=\"fullName\" value=\"\"\r\n  required=\"required\" autofocus=\"autofocus\" \/&gt;\r\n<\/pre>\n<\/blockquote>\n<p>Safari, Chrome and Opera support it natively.  Other browsers will support it if you ensure the <code>autofocus<\/code> is set in the <code>data-webforms2-support<\/code> attribute for the <code>script<\/code> tag that loads html5Forms.js<\/p>\n<blockquote class=\"code\">\n<pre> &lt;script type=\"text\/javascript\"\r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\"&gt;\r\n &lt;\/script&gt;\r\n\r\n &lt;script type=\"text\/javascript\"\r\n          <span class=\"hilite\">data-webforms2-support=\"validation,autofocus\"<\/span>\r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" &gt; \r\n\r\n &lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/autofocus.html\">See an example of <code>autofocus<\/code> in action<\/a><\/p>\n<h2>The <code>placeholder<\/code> Attribute<\/h2>\n<p>A placeholder is a great visual cue to communicate any special information about a field (e.g. a description<br \/>\nof the data to be input, if the field is required, etc). <\/p>\n<p><div id=\"attachment_1317\" style=\"width: 397px\" class=\"wp-caption aligncenter\"><a href=\"\/tests\/html5Forms\/tests\/html5Forms\/placeholder.html\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1317\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/placeholder.png\" alt=\"An example of placeholder text.  The text disappears when the field has focus or if the user types information into the field.\" title=\"placeholder\" width=\"387\" height=\"94\" class=\"size-full wp-image-1317\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/placeholder.png 387w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/placeholder-300x72.png 300w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/a><p id=\"caption-attachment-1317\" class=\"wp-caption-text\">An example of placeholder text.  The text disappears when the field has focus or if the user types information into the field.<\/p><\/div><\/p>\n<p>Syntax is simple:<\/p>\n<blockquote class=\"code\">\n<pre>&lt;input type=\"text\" name=\"fullName\" value=\"\" required=\"required\"\r\n   placeholder=\"Required information\" \/&gt;\r\n<\/pre>\n<\/blockquote>\n<p>Safari, Chrome and Firefox support this attribute natively.  Other browsers will support it if you add <code>placeholder<\/code> to html5Forms&#8217; <code>data-webforms2-support<\/code> attribute:<\/p>\n<blockquote class=\"code\">\n<pre> &lt;script type=\"text\/javascript\"\r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\"&gt;\r\n &lt;\/script&gt;\r\n\r\n &lt;script type=\"text\/javascript\"\r\n          <span class=\"hilite\">data-webforms2-support=\"validation,placeholder\"<\/span>\r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" &gt; \r\n\r\n &lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/placeholder.html\">See an example of the HTML5 <code>placeholder<\/code><br \/>\ntag in action.<\/a><\/p>\n<h2>The <code>range<\/code> Input Type and <code>output<\/code> Tag<\/h2>\n<p>Easily my favourite of the HTML5 widgets, <code>range<\/code> gives developers a sliding control to put inside their forms.  <\/p>\n<p>The syntax is simple:<\/p>\n<blockquote class=\"code\">\n<pre>&lt;input type=\"range\"  name=\"rangeEl\" value=\"\" min=\"0\" max=\"150\" step=\"1\" \/&gt;\r\n<\/pre>\n<\/blockquote>\n<p>The <code>min<\/code> and <code>max<\/code> attributes contain the minimum and maximum values, and <code>step<\/code> denotes by what increments the range slider increments by when moved.  Note that you can use these attributes with the <code>number<\/code> input type as well, but instead of having the fancy interface, it will use the validation engine to ensure the value follows what these attributes dictate.<\/p>\n<p>At the time of this writing, Opera and WebKit based browsers (like Safari and Chrome), support it natively, and html5Forms uses <a href=\"http:\/\/www.frequency-decoder.com\/demo\/slider-revisited\/\">the Frequency Decoder Slider Widget<\/a> to implement it in unsupported browsers.  To ensure cross-browser HTML5 range element goodness, add <code>range<\/code> to html5Forms&#8217; <code>data-webforms2-support<\/code> attribute:<\/p>\n<blockquote class=\"code\">\n<pre> &lt;script type=\"text\/javascript\"\r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\"&gt;\r\n &lt;\/script&gt;\r\n\r\n &lt;script type=\"text\/javascript\"\r\n          <span class=\"hilite\">data-webforms2-support=\"validation,range\"<\/span>\r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" &gt; \r\n\r\n &lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p>Take a look at the screenshots below.  You will see that the way a <code>range<\/code> field varies among the browsers that natively support it, and even in some of the browsers that use html5Forms:<\/p>\n<table class=\"screenshots noresize\">\n<thead>\n<tr>\n<th><\/th>\n<th>Explorer 6.x+<br \/>\n(html5Forms support)<\/th>\n<th>Firefox 3.5+<br \/>\n(html5Forms support)<\/th>\n<th>Safari 4.0+<br \/>\n(native support)<\/th>\n<th>Chrome 3.0+<br \/>\n(native support)<\/th>\n<th>Opera 10.0+<br \/>\n(native support)<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th>Windows<\/th>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeExplorerWindows.png\"><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Internet Explorer 6\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeExplorerWindows.png\" alt=\"Screenshot of range field for Internet Explorer 6\" width=\"120\" height=\"68\" \/><\/a><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Windows Firefox\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeFirefoxWindows.png\" alt=\"Screenshot of range field for Windows Firefox\" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Windows Safari\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeSafariWindows.png\" alt=\"Screenshot of range field for Windows Safari \" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Chrome Windows\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeChromeWindows.png\" alt=\"Screenshot of range field for Chrome Windows\" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Windows Opera\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeOperaWindows.png\" alt=\"Screenshot of range field for Windows Opera\" width=\"120\" height=\"68\" \/><\/td>\n<\/tr>\n<tr>\n<th>Mac<\/th>\n<td>Not Applicable<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Mac Firefox\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeFirefoxMac.png\" alt=\"Screenshot of range field for Mac Firefox\" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Mac Safari\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeSafariMac.png\" alt=\"Screenshot of range field for Mac Safari \" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Chrome Mac\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeChromeMac.png\" alt=\"Screenshot of range field for Chrome Mac\" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Mac Opera\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeOperaMac.png\" alt=\"Screenshot of range field for Mac Opera\" width=\"120\" height=\"68\" \/><\/td>\n<\/tr>\n<tr>\n<th>Linux<\/th>\n<td>Not Applicable<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Linux Firefox\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeFirefoxUbuntu.png\" alt=\"Screenshot of range field for Linux Firefox\" width=\"120\" height=\"68\" \/><\/td>\n<td>Not Applicable<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Linux Chrome\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeChromeUbuntu.png\" alt=\"Screenshot of range field for Linux Chrome\" width=\"120\" height=\"68\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" title=\"Screenshot of range field for Linux Opera\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/rangeOperaUbuntu.png\" alt=\"Screenshot of range field for Linux Opera\" width=\"120\" height=\"68\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The <code>output<\/code> tag can be used to show the value of a field, or the result of an operation performed on a number of fields, using JavaScript expressions.  Although the <code>output<\/code> tag may calculate fomulas referencing <em>any<\/em> form fields, it is useful especially for the <code>range<\/code> input type so users can see what value the range element is pointing to:<\/p>\n<blockquote class=\"code\">\n<pre><span class=\"hilite\">&lt;output onforminput=\"this.value = rangeEl.value\"&gt;-&lt;\/output&gt;<\/span>\r\n&lt;input type=\"range\"  name=\"rangeEl\" value=\"\" min=\"0\" max=\"150\" step=\"1\" \/&gt;\r\n\r\n<\/pre>\n<\/blockquote>\n<p>The contents of the <code>output<\/code> tag is the default value.  Note the <code>this.value<\/code> syntax &#8211; I am not sure why the W3C HTML5 working group decided it was needed (why not just have the formula?), but it is.  If there are other types of expressions supported in the final specification, they are not supported by <code>html5Forms<\/code> at this time.  Note that in order to apply CSS to the <code>output<\/code> tag in IE, it is necessary to use <a href=\"http:\/\/remysharp.com\/2009\/01\/07\/html5-enabling-script\/\">Remy Sharp&#8217;s HTML5 Enabling Script<\/a>.<\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/range.html\">See an example of the <code>range<\/code> input being used with the <code>output<\/code> tag.<\/a><\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/output.html\">See an example of the <code>output<\/code> tag being used <em>without<\/em> a <code>range<\/code> field.<\/a><\/p>\n<div class=\"importantNotes\">\n<h3>Update (May 12. 2011):<\/h3>\n<p>Since this article was written, the <code>onforminput<\/code> event has been deprecated in favor of the <code>oninput<\/code>.  I have updated html5Forms to support <code>oninput<\/code>, and <a href=\"https:\/\/www.useragentman.com\/blog\/2011\/05\/12\/fixing-oninput-in-ie9-using-html5widgets\/\">have written article about its <code>oninput<\/code> support<\/a>.  I encourage you to see the different between the above to examples and the <code>oninput<\/code> method of <a href=\"https:\/\/www.useragentman.com\/examples\/html5Forms\/tests\/html5Forms\/tests\/html5Forms\/range.html\">using the <code>output<\/code> tag with <code>range<\/code><\/a> and <a href=\"https:\/\/www.useragentman.com\/examples\/html5Forms\/tests\/html5Forms\/tests\/html5Forms\/output.html\">without <code>range<\/code><\/a>\n<\/div>\n<h2>The <code>datetime<\/code>, <code>datetime-local<\/code>, <code>date<\/code> and <code>week<\/code> Input Types<\/h2>\n<p>At the time of this writing, Opera is the only desktop browser that supports HTML5 date fields.  To support the other browsers, html5Forms uses a slightly modified version of <a href=\"http:\/\/www.dynarch.com\/\">DynArch.com<\/a>&#8216;s <a href=\"http:\/\/www.dynarch.com\/projects\/calendar\/old\/\">Ex-&#8220;Coolest&#8221; DHTML Calendar<\/a> (I decided not to use <a href=\"http:\/\/www.dynarch.com\/projects\/calendar\/\">the coolest one<\/a> because the Ex-Coolest has a more permissive license and it works really well). Now all browsers can support the <code>datetime<\/code>, <code>datetime-local<\/code>, <code>date<\/code>, <code>month<\/code> and <code>week<\/code> input fields, and submit these values in a consistent format.<\/p>\n<p>For browsers that don&#8217;t support the date tag, all you need to do is add <code>date<\/code> to html5Forms&#8217; <code>data-webforms2-support<\/code> attribute:<\/p>\n<blockquote class=\"code\">\n<pre> &lt;script type=\"text\/javascript\"\r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\"&gt;\r\n &lt;\/script&gt;\r\n\r\n &lt;script type=\"text\/javascript\"\r\n          <span class=\"hilite\">data-webforms2-support=\"date\"\r\n          data-lang=\"en\"<\/span>\r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" &gt; \r\n\r\n &lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p>Note the <code>data-lang<\/code> attribute.  This is optional and dictates what language pack is used for the calendar.  <strong>If <code>data-lang<\/code> is not included, it will use the browser&#8217;s default language as given by the <code>navigator.language<\/code> JavaScript property<\/strong>.  For a list of all the languages supported, take a look at the js files inside the <code>html5Forms\/shared\/js\/jscalendar-1.0\/lang<\/code> directory.<\/p>\n<p>Below is a comparison between Opera&#8217;s native date widget vs. the one provided by the DynArch\/HTML5Widget combo:<\/p>\n<table class=\"screenshots\">\n<thead>\n<tr>\n<th><\/th>\n<th>DateTime Widget<\/th>\n<th>Month Widget<\/th>\n<\/tr>\n<tr>\n<th>Opera Windows<\/th>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/dateTimeOperaWindows.png\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/monthOperaWindows.png\" \/><\/td>\n<\/tr>\n<tr>\n<th>Opera Mac<\/th>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/dateTimeOperaMac.png\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/monthOperaMac.png\" \/><\/td>\n<\/tr>\n<tr>\n<th>Firefox 3.5+ Windows<br \/>\n(html5Forms support)<\/th>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/datetimeFirefoxWithHTML5Widgets.png\" \/><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/05\/monthFirefoxWithHTML5Widgets.png\" \/><\/td>\n<\/tr>\n<\/table>\n<p>It looks like the native calendar for Opera for Mac is a smaller than the Windows version &#8211; hopefully this is just on my copy of the browser.<\/p>\n<p>The display formats, and they values that they submit to the server, are pretty much the same<\/p>\n<table class=\"screenshots\">\n<thead>\n<tr>\n<th>Input type<\/th>\n<th>Format displayed on page<\/th>\n<th>Format sent to server<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>datetime<\/td>\n<td><em>yyyy-mm-dd HH:MM<\/em><\/td>\n<td><em>yyyy-mm-dd<\/em>T<em>HH:MM<\/em>Z<\/td>\n<\/tr>\n<tr>\n<td>datetime-local<\/td>\n<td><em>yyyy-mm-dd HH:MM<\/em><\/td>\n<td><em>yyyy-mm-dd<\/em>T<em>HH:MM<\/em><\/td>\n<\/tr>\n<tr>\n<td>date<\/td>\n<td><em>yyyy-mm-dd<\/em><\/td>\n<td><em>yyyy-mm-dd<\/em><\/td>\n<\/tr>\n<tr>\n<td>month<\/td>\n<td><em>yyyy-mm<\/em><\/td>\n<td><em>yyyy-mm<\/em><\/td>\n<\/tr>\n<tr>\n<td>week<\/td>\n<td><em>yyyy-mm<\/em>W<\/td>\n<td><em>yyyy-mm<\/em>W<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/dateTime.html\">See the HTML5 <code>date<\/code> widgets in action.<\/a><\/p>\n<p><strong>Note:<\/strong> In this example, The Opera Mobile Windows Emulator incorrectly displays the <code>datetime<\/code> and <code>datetime-local<\/code> calendars in the upper left-hand corner of the screen, but <strong>not<\/strong> the other ones.  Since this is Opera&#8217;s own calendar widget, and not html5Forms&#8217;, this bug will have to fixed by Opera.  <\/p>\n<p><div id=\"attachment_1269\" style=\"width: 501px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMobileDateTimeBug.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1269\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMobileDateTimeBug.png\" alt=\"Screenshot of Opera Mobile bug\" title=\"operaMobileDateTimeBug\" width=\"491\" height=\"768\" class=\"size-full wp-image-1269\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMobileDateTimeBug.png 491w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMobileDateTimeBug-191x300.png 191w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/a><p id=\"caption-attachment-1269\" class=\"wp-caption-text\">Screenshot of Opera Mobile bug<\/p><\/div><\/p>\n<h2>The <code>color<\/code> Input Type<\/h2>\n<p>Opera and the WebKit based <a href=\"http:\/\/devblog.blackberry.com\/2010\/03\/use-html5-in-your-blackberry-web-content\">Blackberry browser<\/a> are the only ones that I know of that support the <code>color<\/code> input type.  While we wait to see how the major browser manufacturers decide to implement <code>color<\/code>, you can use html5Forms&#8217; implementation which uses <a href=\"http:\/\/www.softwareishard.com\">Jan Odvarko<\/a>&#8216;s <a href=\"http:\/\/jscolor.com\">jscolor<\/a>.  The script has been configured to allow only allow lower case hexadecimal rgb values to be entered, and that a blank value not be allowed, as per the W3C spec.<\/p>\n<p>Here are the script tags needed to implement this in all browsers:<\/p>\n<blockquote class=\"code\">\n<pre> &lt;script type=\"text\/javascript\"\r\n      src=\"\/path\/to\/shared\/js\/modernizr.com\/Modernizr-2.5.3.forms.js\"&gt;\r\n &lt;\/script&gt;\r\n\r\n &lt;script type=\"text\/javascript\"\r\n          <span class=\"hilite\">data-webforms2-support=\"color\"<\/span>\r\n          src=\"\/path\/to\/html5Forms\/shared\/js\/html5Forms.js\" &gt; \r\n\r\n &lt;\/script&gt;<\/pre>\n<\/blockquote>\n<p>Below is a comparison between the Blackberry&#8217;s implementation (grabbed from <a href=\"http:\/\/devblog.blackberry.com\/\">the Blackberry Development Blog<\/a>), Opera&#8217;s and HTML5Widget\/jscolor&#8217;s. <\/p>\n<table class=\"screenshot fullWidth\">\n<thead>\n<tr>\n<th>Blackberry Web Browser<\/th>\n<th>Firefox 3.5 with html5Forms.js<\/th>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/html5-color-input.jpg\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/html5-color-input.jpg\" alt=\"HTML5 Color form field, Blackberry\" title=\"html5-color-input\"  class=\"alignnone size-full wp-image-1292\" \/><\/a>\n<\/td>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/jscolor.png\"><img decoding=\"async\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/jscolor.png\" alt=\"HTML5 color input field with html5Forms and jscolor.\" title=\"jscolor\"  class=\"alignnone size-full wp-image-1291\" \/><\/a>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table class=\"screenshot fullWidth\">\n<thead>\n<tr>\n<th>Opera (initial click)<\/th>\n<th>Opera (after clicking the &#8220;Other&#8221; button)<\/th>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/html5-color-input.jpg\"><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2010\/07\/html5-color-opera-small.png\" alt=\"HTML5 Color form field, Opera (small)\" title=\"html5-color-input\"  class=\"alignnone size-full wp-image-1292\" \/><\/a>\n<\/td>\n<td><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/jscolor.png\"><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2010\/07\/html5-color-opera-full.png\" alt=\"HTML5 Color form field, Opera (large)\" title=\"jscolor\"  class=\"alignnone size-full wp-image-1291\" \/><\/a>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/color.html\">See HTML5Widget&#8217;s implementation of the<br \/>\n<code>color<\/code> input type.<\/a><\/p>\n<p><strong>Note:<\/strong> Like other HTML syntax, <code>color<\/code> uses the unfortunate American spelling instead of the Queen&#8217;s Proper English (i.e. colour). Ensure you spell it incorrectly in order to make this work.  ;-)<\/p>\n<h2>How Well Do These Libraries Handle the Official Specification?<\/h2>\n<p>I have done some testing on some existing examples that use HTML5 forms to ensure that it works the way developers expect.  Here are a few examples that I have taken, with the necessary JavaScript added:<\/p>\n<ul>\n<li><a href=\"\/tests\/html5Forms\/tests\/html5Forms\/24ways.org\/index.html\"><strong>A cool looking payment form<\/strong><\/a> by <a href=\"http:\/\/yaili.com\/\">Inayaili de Le\u00f3n<\/a> (originally from<a href=\"http:\/\/24ways.org\/2009\/have-a-field-day-with-html5-forms\"> her HTML5 forms tutorial<\/a>)<\/li>\n<li><a href=\"\/tests\/html5Forms\/tests\/html5Forms\/bradshawenterprises.com\/index.html\"><strong>An HTML5 Form Demo<\/strong><\/a> by <a href=\"http:\/\/www.bradshawenterprises.com\/\">Richard Bradshaw<\/a> (originally from his <a href=\"http:\/\/www.bradshawenterprises.com\/blog\/2010\/fancy-forms-html5-css3-js\/\"><em>Fancy Forms: HTML5 + CSS3 \u2013 JS<\/em><\/a> article)<\/li>\n<\/ul>\n<p>However, the HTML5 Forms specification is large, and unfortunately, the libraries included in the html5Forms package don&#8217;t implement everything &#8230; <strong>yet!!!!<\/strong>  Since I am really motivated with what HTML5 forms can do, I am committed to completing support to most, if not all, of the HTML5 Forms specification, and I have updated this package many times in the last two years. <\/p>\n<p>Things that I will be working on in the near future are:<\/p>\n<ul>\n<li><strong>Support for other HTML5 form elements<\/strong>, among other things, <code>datalist<\/code>, <code>number<\/code>, <code>keygen<\/code>, <code>time<\/code>, <code>meter<\/code> and <strike><code>progress<\/code><\/strike> (If you want to polyfill the <code>progress<\/code> element, read my blog post <a href=\"\/blog\/2012\/01\/03\/cross-browser-html5-progress-bars-in-depth\/\">Cross Browser HTML5 Progress Bars In Depth<\/a>. <\/li>\n<li><strike><strong>Support for CSS styling of HTML5 form widgets<\/strong> as well as the ability to style form fields according to their validation state (e.g. <code>:valid<\/code> and <code>:invalid<\/code> psudo-classes).<\/strike> While html5Forms does not support the <code>:valid<\/code> and <code>:invalid<\/code> psudo-classes directly, form elements that use the polyfill can be styled to mimic that behavior.  Please read my blog post <a href=\"\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms &mdash; Even In Older Browsers<\/a> for more information.<\/li>\n<li><strong>Default styling for some of the new input types<\/strong>, like <code>tel<\/code>, <code>email<\/code>, <code>url<\/code>.  Opera for Mac and Opera Mobile are the only browsers I know of that support this for <code>email<\/code> and <code>url<\/code>.\n<p><div id=\"attachment_1298\" style=\"width: 340px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMacURLandEmail.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1298\" src=\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMacURLandEmail.png\" alt=\"email and url form fields in Opera Mac\" title=\"\" width=\"330\" height=\"156\" class=\"size-full wp-image-1298\" srcset=\"http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMacURLandEmail.png 330w, http:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2010\/07\/operaMacURLandEmail-300x141.png 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><p id=\"caption-attachment-1298\" class=\"wp-caption-text\"><code>email<\/code> and <code>url<\/code> form fields in Opera Mac<\/p><\/div><\/li>\n<li><strike><strong>Support for customizing the validation look and feel.<\/strong>  This is one I would love to do, since I&#8217;m sure a lot of developers would want to change how validation errors appear on the screen.  Unfortunately, the HTML5 specification doesn&#8217;t describe a standard way of doing this.<\/strike>  Although there is not a common way of styling native implementations of the validation messages, it is possible to create a good cross-browser skin using the polyfill.  Read <a href=\"\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms &mdash; Even In Older Browsers<\/a> for more on this.<\/li>\n<li><strong>In Internet Explorer 7 and lower, the ability to style input types it doesn&#8217;t support natively<\/strong> with CSS code like <code>input[type=\"range\"]<\/code><\/li>\n<li><strong>Enabling HTML5 forms validation on the server side<\/strong> to ensure data integrity for browser that don&#8217;t support HTML5 forms that have JavaScript disabled.<\/li>\n<li><strike><strong>Support for internationalization of the error messages used in <code>webforms2<\/code>.<\/strong><\/strike> This is not so important now that html5Forms supports setting custom error messages using the input tag&#8217;s <code>data-errormessage<\/code> attribute.  Again, read <a href=\"\/blog\/2012\/05\/17\/cross-browser-styling-of-html5-forms-even-in-older-browsers\/\">Cross Browser Styling of HTML5 Forms &mdash; Even In Older Browsers<\/a> to find out more.<\/li>\n<\/ul>\n<h2>Integrating With <code>visibleIf<\/code> To Make Even <strong>Cooler<\/strong> Looking Forms<\/h2>\n<p>The <code>webforms2<\/code> and <code>html5Widgets<\/code> libraries are designed to co-exist well with <code><a href=\"https:\/\/www.useragentman.com\/blog\/2010\/06\/20\/visibleif-html5-custom-data-attributes-with-javascript-make-dynamic-interactive-forms\/\">visibleIf<\/a><\/code> to create interactive forms with fields that only validate the ones that visibleIf is displaying.<\/p>\n<p><a class=\"exampleLink\" href=\"\/tests\/html5Forms\/tests\/html5Forms\/patternRequiredWithVisibleIf.html\">See an example of HTML5 validation working with the <code>visibleIf<\/code> JavaScript library<\/a><\/p>\n<h2>Acknowledgments, Shout-outs and Kudos<\/h2>\n<ul>\n<li><strong><a href=\"http:\/\/farukat.es\/\">Faruk Ates<\/a> and <a href=\"http:\/\/paulirish.com\/\">Paul Irish<\/a><\/strong> for <em>the<\/em> definitive HTML5 and CSS3 feature detector, <a href=\"http:\/\/www.modernizr.com\/\">modernizr<\/a>.<\/li>\n<li><strong><a href=\"http:\/\/weston.ruter.net\/\">Weston Ruter<\/a><\/strong> for doing the insane amount of work on <a href=\"https:\/\/github.com\/westonruter\/webforms2\">webforms2<\/a> <em>years ago<\/em>.<\/li>\n<li><strong><a href=\"http:\/\/www.frequency-decoder.com\/\">Brian McAllister:<\/a><\/strong> for making the excellent <a href=\"http:\/\/www.frequency-decoder.com\/2008\/08\/01\/unobtrusive-slider-control-v2\">Unobtrusive slider control<\/a> which I used for the range element.<\/li>\n<li><strong><a href=\"http:\/\/www.dynarch.com\/\">Mihai Bazon<\/a><\/strong> for keeping the <a href=\"http:\/\/www.dynarch.com\/projects\/calendar\/old\/\">The Ex-\u201cCoolest\u201d DHTML Calendar<\/a> around even though he has a paid product.<\/li>\n<li><strong><a href=\"http:\/\/www.softwareishard.com\">Jan Odv\u00e1rko<\/a><\/strong> for his rocking <a href=\"http:\/\/jscolor.com\/\">jscolor<\/a> widget.<\/li>\n<li><strong><a href=\"http:\/\/remysharp.com\/\">Remy Sharp<\/a><\/strong> for his fine <a href=\"<a href=\"http:\/\/remysharp.com\/2009\/01\/07\/html5-enabling-script\/\">HTML5 Enabling Script<\/a> so we can force IE to style things like the <code>output<\/code> tag.<\/li>\n<li><strong><a href=\"http:\/\/yaili.com\/\">Inayaili de Leon<\/a>, <a href=\"http:\/\/annevankesteren.nl\/\">Anne van Kesteren<\/a> and <a href=\"http:\/\/www.bradshawenterprises.com\/\">Richard Bradshaw<\/a><\/strong> for allowing me to show how easy it is to make their original HTML5 Form demos work with html5Widgets.<\/li>\n<\/ul>\n<h2>Further Reading<\/h2>\n<ul>\n<li><strong><a href=\"http:\/\/www.w3.org\/TR\/html5\/forms.htm\">The W3C HTML5 Forms Specification Working Draft:<\/a><\/strong> The Working Draft is in &#8220;Last call for comments&#8221; status, so there may be some last minute changes.<\/li>\n<li><strong><a href=\"http:\/\/diveintohtml5.org\/forms.html\">A Form of Madness:<\/a><\/strong> Chapter 10 of Mark Pilgrim&#8217;s great reference on HTML5.<\/li>\n<li><strong><a href=\"http:\/\/www.whatwg.org\/specs\/web-forms\/current-work\/\">Web Forms 2.0 Working Draft:<\/a><\/strong> The WHATWG spec that the W3C spec is based on.  It includes the repetition model which didn&#8217;t make it into the W3C spec<\/li>\n<\/ul>\n<h2>Download<\/h2>\n<p><strike>Both <a href=\"https:\/\/github.com\/zoltan-dulac\/html5Forms.js\">html5Widgets<\/a> and <a href=\"https:\/\/github.com\/westonruter\/webforms2\">webforms2<\/a> both have permanent homes at github (however, the html5Widgets github page contains a copy of webforms2 in it for your convenience).<\/strike> html5Forms, along with all the helper libraries, are available at the <a href=\"https:\/\/github.com\/zoltan-dulac\/html5Forms.js\">html5Forms<\/a> github repository.  The old html5Widgets repo is deprecated and will be going away in the future.  I decided to rename the project to html5Forms since html5Widgets.js was really just the widget library for the whole package.  Also, <a href=\"http:\/\/paulirish.com\">Paul Irish<\/a> once told me he thought it was may more obvious of a name &#8230; it just took me two years to be convinced :-)<\/p>\n<p><a class=\"exampleLink\" href=\"https:\/\/github.com\/zoltan-dulac\/html5Forms.js\">Download the latest version of html5Forms.js and all the cool 3rd Party scripts from github.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"\/blog\/wp-content\/uploads\/2010\/07\/html5Calendar.png\" \/>Next generation web forms using HTML5 is hard to do today due to spotty browser support.  I demonstrate how a suite of JavaScript libraries can be used to help us use HTML5 Forms <strong>today<\/strong>.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,35,7,119],"tags":[],"class_list":["post-4728","post","type-post","status-publish","format-standard","hentry","category-forms","category-html5","category-javascript","category-polyfills"],"_links":{"self":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=4728"}],"version-history":[{"count":83,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4728\/revisions"}],"predecessor-version":[{"id":5649,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/4728\/revisions\/5649"}],"wp:attachment":[{"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=4728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=4728"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=4728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}