Labeling Controls

Clearly labeling your controls is vital when designing forms, so that the user knows where to enter data or which option to choose. There are two types of labels:

       Implicit labels – which take the form of normal text and markup next to a control such as a text input, radio button, or checkbox

       Explicit labels – which use the <label> element

Often you will find implicit labels  suitable for indicating which form control a label belongs to. Explicitly labeling controls requires programming effort – and not many of the authoring packages help you to do this, so it's up to you to code the correct label with the corresponding form control.

       Place prompts for text entry fields and combo boxes to the left of or above the control

       Put prompts for a checkbox or radio button to the right of the control

       For buttons, the prompt is the value – if you don't want it sent with the form, don't give it a name attribute

The simplest way to label a form control is just to use text next to it, for example:

Street number and name * <input type="text" name="street" size="40" /><br />
  
Suburb * <input type="text" name="suburb" size="40" /><br />

Post code * <input type="password" name="postcode" size="6" /><br />

which would look something  like this:

 (You can find all the code examples in this section in ch02_eg7.htm.)

The presentation is not that attractive, but we'll see how we can create better layout in the following section. This type of labeling is a lot simpler than explicit labeling – although it does require careful positioning of values.

The alternative is explicit  labeling through the use of the <label> element. Remember, while the <label> element was only introduced in IE 4 and Netscape 6, older browsers ignore the element and just display its content anyway. The <label> element must either contain the form control or carry a for attribute whose value is the value of the id attribute for the form control it is labeling. Here you can see the use of the for and id attributes:

<label for="street">Street number and name * </label>

<input id="street" type="text" name="street" size="40" /><br />

<label for="suburb">Suburb * </label>

<input id="suburb" type="text" name="suburb" size="40" /><br />

<label for="postcode">Post code * </label>

<input id="postcode" type="password" name="postcode" size="6" /><br />

</form>

This gives the same output as the previous example.

As we saw earlier in the chapter, labels can also be used along with script to increase the clickable size of a radio button or checkbox.

Finally, here's an example of nesting  the form control inside the <label> element. This time, we don't require a for attribute:

<label >

Street number and name * <input type="text" name="street" size="40" />

</label><br />

<label>Suburb * <input type="text" name="suburb" size="40" />

</label><br />

<label>Post code * <input type="password" name="postcode" size="6" />

</label><br />

And again, the output will be the same as when we didn't use the <label> element.

As you can see, explicit labeling involves a lot of extra effort and isn't required unless you're going to use complex formatting that will confuse aural browsing software. We'll see how this might happen when we look at the layout of forms using tables later in the chapter.

In the very rare cases when you can't provide a label at all, at least provide a prompt in text input controls using the value attribute – although remember that this will be sent as the default if the user doesn't enter anything .

You must also be very careful about the choice of prompt or label that you use . It's very easy to get attached to a way of thinking and forget that something that's clear to you may not be as obvious to someone else. In particular, when you're working closely on a project, your understanding might affect your judgment. For example, the idea of a product ID may be perfectly clear to you, but new users to a site may prefer to refer to products by name.

Splitting a Form into Different Pages
Usable Forms for the Web