HTML <label> element

The <label> element represents a caption for a form control. It gives readable text to the control so the user knows what the control is asking for.

A label can be connected to a control in two common ways. The control can be placed inside the <label> element, or the label can use a for attribute that matches the control's id.

This connection is not just visual. Clicking or tapping a properly connected label can focus or activate its control. That makes forms easier to use, especially for small checkboxes, radio buttons, and controls on touch screens.

The for value matches the control's id, not its name. The id must be unique in the document. Labelable elements include inputs other than hidden inputs, <select>, <textarea>, <button>, <output>, <meter>, and <progress>. A label cannot name an arbitrary <div> this way.

A placeholder is not a proper replacement for a label. Placeholder text disappears when the user types, and it is a hint inside the control rather than the stable name of the control.

The association supplies a name that assistive technology can use. One label identifies one control; a control may have more than one label. Do not nest labels or enclose several controls in one label. For a shared question covering several controls, use <fieldset> with <legend>, while retaining each control's individual label.

Attributes: for, GLOBALS.

Typical layout:
<p>
  <label for="pf-email-demo">Email address</label>
  <input id="pf-email-demo" name="email" type="email">
</p>
<p>
  <label>
    <input type="checkbox" name="news">
    Send me updates
  </label>
</p>

Visual representation: