Forms — The <label> Tag

<label>...</label>

Attributes:

  for="id"
  accesskey="accesskey"

The <label> tag was introduced in HTML 4.0 as a usability aid.

For most if not all of your form gadgets, you'll have some sort of text that indicates what the gadget is for. For example, if you have a text box where you want the user to enter his name, you'll have some sort of text such as "Enter your name:". This text is called the gadget's label. The <label> tag is placed around this text to formally declare the text as a label. This is particularly helpful in aural (speaking) browsers so that the browser can tell the user that the label is associated with it's particular form gadget. In browsers that support it, the user can click on the label to give focus to the gadget rather than clicking on the gadget itself.

Here's an example:

<form>
<p>
  <label for="first" accesskey="f">First name:</label>
  <input type="text" name="first" id="first">
</p><p>
  <label for="last" accesskey="l">Last name:</label>
  <input type="text" name="last" id="last">
</p>
</form>

Netscape doesn't support <label> (not even Netscape 6). If you're using IE, you'll be able to see how <label> works.

IE doesn't visually indicate anything differently when you include <label>. However, if you click on one of the labels, the text box associated with it receives focus (in other words, you can now start typing in the text box).

By including an accesskey attribute, we've also provided another method for giving focus to the gadgets. In Windows, typing alt-F will give focus to the "first name" text box and typing alt-L will give focus to the "last name" text box. In other systems, a slightly different method will be needed. On the Mac, for example, you'd use cmd-F and cmd-L.

You can decide for yourself whether or not providing an accesskey is useful. Your users won't realize they're there unless you somehow indicate which accesskey is associated with which gadget, and explain to them how to use them. (Remember that they won't work for your visitors with browsers that don't support them!)

The for Attribute

The for attribute associates the <label> with the gadget that it's associated with. Rather than referring to the name attribute in the gadget, this refers to the id attribute. So you'll need to include both a name and an id attribute for the gadget: name is still used to identify the field when the form is sent. The name and id can specify the same name, or they can specify different names. In the case of radio buttons and checkboxes, you'll need to make sure that each id is unique, even through groups of these have the same name.

Implicit References

HTML 4.0 specifies that the <label> tag can be placed around both the label AND the gadget, eliminating the need for for and id. For example:

<form>
<p>
  <label accesskey="f">
    First name:
    <input type="text" name="first">
  </label>
</p><p>
  <label accesskey="l">
    Last name:
    <input type="text" name="last">
  </label>
</p>
</form>

Unfortunately, IE doesn't support implicit references, so stick to using for.