Forms are always a pain. They are difficult to design and difficult to make user-friendly. Here are a few rarely used tags that can be incorporated into page XHTML mark-up that will improve the usability and accessibility of forms.

Label

<label for="firstName">First Name</label><br />
<input type="text" name="firstName" id="firstName" />

The label tag used in the code sample above relates the descriptive text to the form control. This is important for screen readers.

<input class="input" type="checkbox" title="Select Color" name="color" id="color1" value="red"><label for="color"> Purple</label>

When used with checkboxes it allows users to click on the text to check the checkbox, similar to desktop applications.

Fieldset & Legend

<fieldset>
<legend>Pick a Color</legend>
<input type="radio" id="color1" name="color" />
<label for="color1">Red</label>
<input type="radio" id="color2" name="color" />
<label for="color2">Blue</label>
<input type="radio" id="color3" name="color" />
<label for="color3">Green</label>
</fieldset>

The fieldset tag is used to group form fields. With a little CSS it works well for humans and machine readers alike. The legend tag provides a way to give the grouping a title.

Optgroup

<select name="Colors">
<optgroup label="Reds">
<option>Crimson</option>
<option>Brick</option>
</optgroup>
<optgroup label="Blues">
<option>Azure</option>
<option>Sky</option>
<option>Navy</option>
</optgroup>
</select>

The optgroup tag groups options in drop down lists. They can have CSS styles applied to them.

Other Techniques

Tab Index

input type=”text” name=”field1” id=”field1” tabindex=”2” />
Adding the tabindex attribute to a form control sets the tab order. Make sure your form element tab in the correct order for those who do not use a mouse.

Access Key

<label for="field1" accesskey="f"><span class="access">F</span>ield 1:</label> <input type="text" name="field1" id="field1" accesskey=”1” />

CSS    .access {text-decoration:underline;}

Adding the accesskey attribute to a form’s label control allows users to press a key to focus the form element – again useful for those who don’t use a mouse. To indicate what the accesskey is for a form, underline the corresponding character in the field’s label.