Formally Labeling Form Parts

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.

To formally label form parts:

Type <label.

If desired, type for="idname">, where idname is the value of the id attribute in the corresponding form element.

Type the contents of the label.

Type </label>.

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


  • 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).

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

    22. The form is beginning to take shape.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows