The label Element

Live Demo

Firefox	Safari	Safari	Chrome	Opera	IE	Android

The Low Down

A <label> is used to create a caption for a form control.

• The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the forattribute.
• To explicitly associate a label with a form control, include the for attribute in the label using the id of the form control as the for attribute’s value.
• For improved accessibility, always include a <label> for every form control.
• Clicking on a form control’s <label> will give focus on the form control.
  • checkbox: clicking on associated label will toggle the checkbox on and off.
  • radio: clicking on associated label will make that radio button checked and un-check whichever other radio button was previously selected in that same-named radio group.
  • color: clicking on associated label will open the color picker
  • range: clicking on associated label will put the thumb into focus, allowing the user to move the thumb with the arrow keys