Improve your forms using HTML5!

By Anne van Kesteren

HTML hasn't really been updated since HTML version 4 was released back in 1998. However, the WHATWG community has been working on HTML since 2004 and then passed to the W3C which takes the form of the W3C HTML5 specifications. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2. Opera supports Web Forms 2 from Version 9.5 or later. To test it, grab the latest version of Opera.

autofocus and omitting attributes

The new Web Forms allows you to do validation and a number of other features in a more declarative way making it much easier to author. For instance this code example:

<form action="" method="get">
 <p><label>Search: <input name=search type="text" id="search"></label></p>
 <script> document.getElementById('search').focus() </script>
 <!-- the rest of the form -->
</form>

can be written using the new form functionality as follows:

<form>
 <p><label>Search: <input name=search autofocus></label></p>
  <!-- the rest of the form -->
</form>

Some code has been removed from the example and a new attribute, autofocus, has been added. The autofocus attribute effectively removed the need for the script element and the id attribute on input which was used by the script. The method attribute on the form element can be omitted because the form will do a GET request by default. Similarly, input controls are text by default. Per Web Forms 2 you can also omit the action attribute when set to the empty string. Indeed, it will give you the same result.

Form validation

Nowadays web developers use nifty scripts to perform form validation on the client side. Soon you'll be able to simply write the following:

<form>
 <p><label>Name: <input name=name required></label></p>
 <p><label>E-mail: <input name=email type=email required></label></p>
 <p><label>URL: <input name=url type=url></label></p>
 <p><label>Comment: <textarea name=comment required></textarea></label></p>
 <p><input type=submit value=React!></p>
</form>

I'd argue that it's almost as readable as English! When the user tries to submit the form the user agent checks if all conditions are being met and if that's the case it submits the form and otherwise it shows an error message to the user. Of course, you should always have server-side validation but in case the user agent supports the new forms this might just save your user a few round trips. Better for usability and your bandwidth.

What I've introduced in the above example are a few of the new controls: email and url. And also a new attribute available to all form controls: required. Besides these, Web Forms 2 also includes controls for dates, time and numbers.

Styling controls

If you want to style a required form control (<input required>) that's quite trivial using some of the new pseudo-classes:

input:required { background:yellow }

Simarly for disabled controls, checked checkboxes, the default submit button, read-only controls, et cetera:

input:disabled { ... }
input:checked + label { ... }
input[type=button]:default { ... }
input:read-only { ... }

This form example shows these features in action.

Anne van Kesteren

Anne van Kesteren works for Opera Software from his home in the Netherlands. He also travels a fair bit to talk about standards. His goal is to keep the Web an open place and fix all the bugs in Web standards.

This article is licensed under a Creative Commons Attribution, Non Commercial - No Derivs 2.5 license.