The LABEL Element



Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).

For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.

This is an excellent usability feature for visitors to your forms. Using the label element allows the user to click on the text associated with the form control instead of having to click the radio button, check box, select box, etc.

In interface design they call it improved targeting, and it can help reduce the risk of repetitive stress injuries (RSI).
Ted Ulle aka tedster 2004-01-25

HTML Code Example

One label element and one ID per form control.

<label for="radio1">This Radio Button 1 has a label associated with it.</label><input type="radio" value="Selected" name="Radio" id="radio1">

Working Examples Using The LABEL Element Within Tables

LABEL Elements - Click Text Form Controls


Working Examples Using The LABEL Element Within List Items <li>

  1. Access Key  Alt + 1
  2. Access Key  Alt + 2
  3. Access Key  Alt + 3
  4. Access Key  Alt + 4

HTML Code Bloat

The LABEL element requires 27 characters of html code (+ ID Name and Label Name) to add a noticeable html forms usability feature.

Associate Label with Another Control Implicitly

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

Working Examples Using The Label Element Implicitly

Admin Note: The implicit method of associating a label with a form control is not supported by Internet Explorer (Tested Internet Explorer 6/Windows 98) as shown in the examples below. IE does support the <label for="name"> method of associating labels as shown above. The below implicit label example performs as intended in both Opera 7.23 and Mozilla 1.6b on Windows 98.

HTML Code Example

<li><label><input type="radio" name="Labels" value="1" />This Radio Button 1 has a label associated with it.></label></li>

References


 


SEO Consultants Directory