Using Labels

Using the <label> element for some  controls can increase their usability, not only for users who have screen readers, but also by increasing the size of the clickable area. Labels were only introduced with IE 4+ and Netscape 6+; however, older browsers will just ignore the <label> element and display the control as intended.

Here, we're adding labels to the previous example, and we're adding actions to those labels that will select the relevant item if the label is  clicked (ch02_eg5.htm):

<form name="myForm">

   <fieldset>

   <legend>[Section C]  <em>Marital Status</em></legend>

   <h4>[Question 10] What is your marital status?</h4> 

   <input type="radio" name="radMaritalStatus" id="maritalSingle"
              value="single" />
       <label for="maritalSingle" style="cursor: hand; cursor: pointer;"
              onclick="document.myForm.radMaritalStatus[0].click();">
              Never Married</label> 

   <em>(If selected go to Question 14)</em><br />

   <input type="radio" name="radMaritalStatus" id="maritalMarried"
              value="married" />

   <label for="maritalMarried" style="cursor: hand; cursor: pointer;"
              onclick="document.myForm.radMaritalStatus[1].click();">
              Married</label><br />

   <input type="radio" name="radMaritalStatus" id="maritalSeparated"
              value="separated" />

   <label for="maritalSeparated" style="cursor: hand; cursor: pointer;"
              onclick="document.myForm.radMaritalStatus[2].click();">
              Separated</label><br />

   <input type="radio" name="radMaritalStatus" id="maritalDivorced"
              value="divorced" />

   <label for="maritalDivorced" style="cursor: hand; cursor: pointer;"
              onclick="document.myForm.radMaritalStatus[3].click();">
              Divorced</label><br />

   <h4>[Question 11] Is your partner applying with you?</h4> 

   ...

   </fieldset>
</form>

Before, you had to click the radio button itself to select an option. Now, if the user clicks on the label (which includes the text beside the radio button), that option will be selected in the list, so you don't have to be as accurate. If you're not familiar with the syntax of the code  used in the onclick attribute (which fires when the label is clicked) we'll be seeing it used more in Chapter 7.

Grouping Controls
Usable Forms for the Web
Splitting a Form into Different Pages