Formally Labeling Form Parts

As you've seen, the explanatory information next to a form element is generally just plain text. For example, you might type "First name" before the text field where the visitor should type her name. (X)HTML provides a method for marking up labels so that you can formally link them to the associated element and use them for scripting or other purposes.

Tips

If you use the for attribute, you must also add the id attribute to the associated form element's opening tag in order to mark it with a label. (Otherwise, the document will not validate.) For more details about the id attribute, consult Naming Elements on page 63.
If you omit the for attribute, no id attribute is required in the element being labeled. The label and the element, in that case, are then associated by proximity, or perhaps by being placed in a common div element.
Another labeling technique is to use the title attribute. For more information, consult Labeling Elements in a Web Page on page 68.
You can use CSS to format your labels (Figure 17.21).

Figure 17.21. Now I can sweep the labels out of the flow and align the text and password boxes to their right.

Figure 17.22. The form is beginning to take shape.

Formally Labeling Form Parts

Figure 17.20. Marking field labels in a formal way gives you an easy way to identify them in a CSS style sheet.

Figure 17.21. Now I can sweep the labels out of the flow and align the text and password boxes to their right.

Figure 17.22. The form is beginning to take shape.