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 this will hopefully result in some much needed improvements. This article shows some of the new functionality of the proposed form chapter of HTML5: Web Forms 2. (Opera has an experimental implementation of Web Forms 2 so if you want you can try out some of the examples listed here.)

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></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:readonly { ... }

This form example shows these features in action.