HTML5 has been getting a lot of buzz, and for good reason.  The next version of the ubiquitous web standard is currently winding its way through the W3C draft process and includes tons of long overdue improvements.  Despite its draft status, browser vendors have been quickly adding support for the new standard.  Based on my limited testing (Safari 5.0.3, Firefox 3.6.13, Chrome 8.0.552.231, all on Mac) Safari and Chrome have the best support for HTML5 at the moment.  If you want to see how well your browser of choice supports HTML5, there is a handy test page that will give you the details of which parts of the standard your browser can / can't handle.

There is a lot new in HTML5, including a ton of new elements such as the <canvas> and <video>, and <audio> elements, which have received a lot of attention.  However, HTML5 also includes many useful changes to existing elements, adding new attributes and behaviors.  Of these, some of the most significant involve the way that forms are built and handled.

As in HTML4, all of the input fields in a form are built up using <input> elements.  In HTML4 there were a fairly limited number of input element types.  Buttons, text / password fields, radio buttons / checkboxes, images, hidden fields and files were pretty much it.  We have all built additional functionality on top of these input types, such as date pickers, color pickers, etc.  HTML5 adds a lot of new valid values for the input element's 'type' attribute, including types for URLs, phone numbers, colors, dates (and their constituent parts) and email addresses.  The idea behind these new input types is for the user agent (that is, the browser) to be able to provide specialized controls for these specialized data types, freeing the developer from having to write them and giving users a more consistent experience across sites.

The <input> element has also been endowed with quite a few totally new attributes.  One of the ones that I am most exited about is the 'form' attribute (which has also been added to the <textarea>, <select>, <fieldset>, <button> and <output> elements).  The 'form' attribute allows you to specify to which form a particular input element belongs, even if it is not a descendant of the <form> element.  In HTML4, input elements must be nested within the form they belong to, as in this simple example:

1
2
3
4

<form name='mainForm' action='submit_url' method='POST'>
	<input type='text' name='firstName'/>
	<input type='text' name='lastName'/>
</form>

In HTML5, you are freed from this constraint.  Instead, you can specify to which form an input element belongs by using the 'form' attribute of the <input> element, like so:

1
2
3
4

<form name='mainForm' action='submit_url' method='POST'/>
 
<input type='text' name='firstName' form='mainForm'/>
<input type='text' name='lastName' form='mainForm'/>

This will definitely make design simpler, especially for pages with multiple forms.  It is unclear whether or not an element can belong to multiple forms, but I do not think that this is possible.

Another neat feature of HTML5 is the way it handles form validation.  We've all used JavaScript to do form validation either with a framework like jQuery or with a function that looks something like this:

1
2
3
4
5
6
7
8
9

function validate(field) {
	with (field){
  		if (value==null||value==""){
    			alert('please enter a value');return false;
  		}else{
    			return true;
  		}
	}
}

In HTML5 this sort of simple validation is no longer required.  Instead of writing JavaScript to validate your forms, you can simply specify which <input> and <textarea> elements must have values provided by using the new 'required' attribute.  If you set the 'required' attribute to 'true', the form to which the input element is attached will not submit unless a value is provided.  This form-level validation can be easily turned off by setting the 'novalidate' attribute of the form to 'true'.  This turns off validation for all the elements that are attached to the form.

Disabling forms, or sections of forms, has also become much simpler.  Using the <fieldset> element, you can group <input> elements together into logical field sets just like you can do in HTML4.  However, HTML5 adds a 'disabled' attribute to the <fieldset> element.  This allows you to disable all of the descendant <input> elements with a single attribute change.  This is easier than having to go through and disable each individual <input> element separately.

For a full list of what's new from HTML4 to HTML5, check the W3C Working Draft.

Happy coding!