Many of your form input elements will need an identifying label. Some input elements like a button, should have the label inside the graphic element, but a text box, checkbox, or radio button needs a label. A label can be just text next to the input element, but for the visually impaired, that would not be very helpful.
When a visually impaired person clicks on regular text, their text reader application will read the text, but they still may not be able to see exactly where the input element is. An html label element has a for attribute with the same value as the id attribute of the form element that it identifies. When a visually impaired person clicks on a label element, their text reader application reads the text, and the related input element receives the focus.
Shown below is an example of a label element used with a text input.
Note that the label element's for attribute ("firstname") is the same as the value of the id attribute of the text input element.
Shown below is an example of a label element used with a checkbox input element.
Note that the code for the label element is positioned after the code for the checkbox input element.
Shown below is an example of a label element used with radio button inputs on a form used to select a type of pizza.
Radio buttons in a group are mutually exclusive, that is, when you set one radio button in a group, all other radio buttons in the group are cleared. In the code shown below, the value of the name group identifies all the buttons in the group. However each radio button has a unique id. The value of each label element's for attribute is the same as the value of the id attribute of the radio buton input element.
Using the label element with your form input elements rather than just placing text next to them is a good idea that makes your web site more accessible.
Learn more at amazon.com