The label Element

The Current State of HTML5 Forms

<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

Chrome

Opera

IE

Android

The Low Down

<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

Our Cookie Policy and Privacy Policy outline how we use cookies to help personalize content, tailor and measure our marketing, and improve your user experience. I agree to use of cookies for these purposes.