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>
