Prior to HTML 4.0, forms had a real usability and accessibility problem when it came to associating text with an input control. The HTML 4.0 Label element provides a fix for this problem. To understand the need for the LABEL element, take the following example:

User Name:

Gender:
Male Female 
<FORM>
User Name:<BR>
<INPUT TYPE=text NAME=user><BR>
Gender:<BR>
<INPUT TYPE=radio NAME=gender value=male> Male 
<INPUT TYPE=radio NAME=gender value=female> Female
</FORM>

While you can probably determine the meaning of the above input controls based on the rendering of the text, there is nothing explicit in the HTML defining this relationship. In addition, the user interface for radio buttons is not very friendly. You need to click directly on the radio button as the text labels are inactive. In most modern user interfaces, you can click on either the control or its associated label to active it and when tabbing, the associated text is highlighted.

Enter the Label Element. The Label element is designed to fix both of the above problems while providing very good support for downlevel browsers. Below we rewrite the above example with the label tag:



Gender:
<FORM>
<LABEL FOR=user>User Name:</LABEL><BR>
<INPUT TYPE=text ID=user NAME=user><BR>
Gender:<BR>
<INPUT TYPE=radio NAME=gender ID=male value=male> 
  <LABEL FOR=male>Male</LABEL> 
<INPUT TYPE=radio NAME=gender ID=female value=female> 
  <LABEL FOR=female>Female</LABEL>
</FORM>

This looks exactly the same as the first example. However, by adding the label tags you have improved the usability of the form in HTML 4.0 enabled browsers (currently Internet Explorer 4.0). If your browser supports HTML 4.0, you should be able to click on the text labels and the controls will automatically be selected. For radio buttons, the labels are also provided with a border when activated. Browsers that do not support the label element just ignore the tag.