Tutorial 13: Giving Form to Forms

Control labels

As you have seen in the various examples in the previous pages, most of the time you will supply some information along with your controls indicating what their use is. This information is usually in the way of labels that contain the control's function. In HTML 4.0, you can use the LABEL element to indicate that a part of your document is actually a label for a form control. This is useful in a number of ways, for instance if a user clicks on a label, the focus is usually given to the control. This is especially useful for checkboxes and radio buttons, which tend to be tiny, where a label will offer more of an area for the user to click on.

The LABEL element

Context:: Can only appear inside FORM elements.
Contents:: Can contain inline elements and text, and at most one form control.
Tags:: Both start-tag and end-tag are required.

Attributes for the LABEL element

FOR (ID reference): The value of this attribute is the value of the ID attribute of the control that this label corresponds to.
Accessibility key attribute
Identifier and classification attributes
Language information attributes
Title attribute
Inline style information attribute
Intrinsic event handler attributes

The easiest way to use the LABEL element is to enclose the control it refers to inside it. This is not always practical, in which case you can give the control an ID attribute and specify it in the FOR attribute of the label.

LABEL is supported by Internet Explorer since version 4.0, but the only syntax recognized is that in which you use FOR to indicate the control the label refers to; putting the element inside the LABEL doesn't work in IE 4.0 or 5.0. Navigator does not support LABEL, but Mozilla does, so we'll probably see it when Navigator 5.0 comes out this summer.

The following example illustrates the use of LABEL with text boxes and radio buttons.

<FORM ACTION="/cgi-bin/html/formdump.cgi" 
      METHOD="GET" ENCTYPE="application/x-www-form-urlencoded">
<P>
<LABEL FOR="fn">First Name:</LABEL>
<INPUT ID="fn" TYPE="text" NAME="firstname" SIZE="10">
<LABEL FOR="ln">Last Name:</LABEL>
<INPUT ID="ln" TYPE="text" NAME="lastname" SIZE="10">

<P>Gender:
<LABEL FOR="gm">Male</LABEL>
<INPUT TYPE="radio" NAME="gender" VALUE="male" ID="gm">
<LABEL FOR="fm">Female</LABEL>
<INPUT TYPE="radio" NAME="gender" VALUE="female" ID="fm">

<INPUT TYPE="submit">
</FORM>