Designing forms, Monash Web Style Guide

The following guidelines will help you design forms that are accessible and work in a variety of browsers.

Position labels for form elements carefully

Position labels so that they are read out immediately before the form input field. In most cases, this means placing the label above or to the left of the form input field. For radio buttons and checkboxes the label should be positioned immediately after the form input field.

Doing this will makes content easier to scan and improve readability for sighted users. It will also ensure the read order for screen reader users is correct.

The disadvantage of a vertical design is the increased length of the form. You may find it better to split the form into more than one page - although this means that you will need to pay particular attention to navigation through the different pages of the form.

Use <label> to explicitly associate the form label with the input field

To associate a label with a form input field, use the <label> element. The association is made by copying the form identification (id) attribute to the for attribute in the label as shown below.

<label for="fname">First name <input type="text" id="fname" name="firstname" size="20" /></label>

If you are using a table to layout the form this is how to associate the form label with the form input field:

<table summary="Layout table for name details."> <tr> <td><label for="fname">First name:</label></td> <td><input type="text" name="firstname" id="fname" /></td> </tr> <tr> <td><label for="lname">Last name:</label></td> <td><input type="text" name="lastname" id="lname" /></td> </tr> </table>

Grouping form fields

Grouping fields using fieldsets

Often forms are made up of two or more sections. On an event booking form there might be fields to collect your contact details and fields collecting information about the events you wish to attend. Using headings to group these section is a quick and easy way which can make the form easier to understand.

Another way of grouping form fields is by using the <fieldset> element. This is visually displayed in a browser as a solid line around a number of form fields with the legend text intersecting top of box.

The following markup shows how the form fields are grouped and titled using the <fieldset> and <legend> elements:

<fieldset> <legend>Personal information</legend> <label for="fname">First name: <input type="text" name="firstname" id="fname" /></label><br /> <label for="lname">Last name: <input type="text" name="lastname" id="lname" /></label> </fieldset>

Grouping menu options

If you have a menu form field which contains multiple groups of information they can be grouped using the <optgroup> element. These groups will be displayed in the browser as a dropdown menu with bold group headings and indented options like so:

The following markup shows how the menu options can be grouped using the <optgroup> element:

<select name="ComOS"> <option selected="selected" label="none" value="none">None</option> <optgroup label="PortMaster 3"> <option label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</option> <option label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</option> </optgroup> <optgroup label="PortMaster 2"> <option label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</option> <option label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</option> </optgroup> </select>

Indicate mandatory fields using the word "required"

Mandatory fields must be labeled with the word "required" immediately after the field name and within the actual field label.

In addition to this, mandatory fields can be also marked up as a different colour (eg. red) to enhance visual identification, but colour must not be used as the only means of conveying a mandatory field.

Use HTML buttons rather than image buttons

Using images for buttons cause difficulty for users who need to increase the text size or use a screen magnifier. Images don't enlarge well as the text can become jagged and difficult to read. If styles and markup are used to create the button when the text size is increased the text size on the button will also gracefully increase.

If you must use an image make sure that the alt attribute contains meaningful description. For example:

<input type="image" alt="Submit!" border="0" name="imageField" src="/assets/images/submit.gif" width="109" height="41" />

Don't add "Clear" or "Reset" buttons to your form

Whilst there may be forms which require a "Clear" or "Reset" button the majority of forms don't and will not benefit from having these buttons added. The reasons being:

Designing forms