The Current State of HTML5 Forms

The label Element

<label for=id1>Checkbox</label>
<input type=checkbox id=id1>

<label for=id2>Password</label>
<input type=password id=id2>

Live Demo


Firefox
Safari
Safari Mobile
Chrome
Opera
IE
Android
Supported Supported Supported Supported Supported Supported Supported

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 for attribute.
  • 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