As we know, most people really hate filling in long forms, for reasons similar to those that cause them to feel annoyed by reading long sections of text in Web pages. That's why paragraph elements were created. In order to break up long blocks of text and make then more appealing to visitors, we just insert <p> elements at specific text block points. Forms should be treated in a similar way. Here are a few usability rules highly recommended for implementation in Web forms:

Chunks of data should be distributed in clearly defined areas on the form.

Or, when we're dealing with long forms, chunks of data should be distributed in separate forms. Often, it's useful to specify which form section the user is filling in, informing him of the required steps for the process. For instance, one form might indicate: Step 1 of three: your personal information, or something equally explanatory.

All of these rules fall under the heading of common sense. However, there are two HTML tags that deserve some special attention for usability: the <fieldset> and <legend> elements. Let's look at them in turn.

The <fieldset> element is a structural container for form elements, useful for supplying context to logical groupings of different elements. We can use multiple <fieldset> tags to bind form elements that belong to a specific section (for instance, personal information). Browsers that support this element will draw a rule around the form elements contained within the tag, displaying them in a very attractive way. Let's show an example, using this element with the previous markup:

<form action="processform.php" method="post">

<fieldset><legend>Personal Information</legend>

First Name<input name="firstname" type="text" /><br/>

Last Name<input name="lastname" type="text" />

</fieldset>

</form>

In the above sample, we've used the <fieldset> tag to wrap form controls, grouping them in a logical context. Also, the <legend> element is embedded into the code in order to provide an appealing heading for the group of form inputs. In theory, screen readers should be able to properly recognize this association. Unfortunately, at this time, browser support for either <fieldset> or <legend> elements is very limited.

The visual output for this code is the following:

The outer line drawn around the form inputs will expand to the width of the parent element. If we want to set a specific width for the line, a proper style should be applied to it.

We're most likely to use the <fieldset> element with checkboxes or radio buttons, but it's perfectly valid to utilize it for grouping any chunks of data collection. It would be nice to see more browser manufacturers adding complete support for these elements, since they're a great enhancement for general form usability. In the meantime, we'll have to do our best to implement accessible online forms using the available set of resources.