About

The label 1) html element represents a caption for a control item in a form (user interface).

Syntax

With the id and for attributes

<label for="username">The name of the user: </label>
<input type="text" id="username">

Without

<label>The name of the user: <input type="text"></label>

Click

A click on the label:

  • will bring focus on the control element.
  • propagates to the control element.

Focus

Demo for the focus

  • The HTML
<label for="username">Click me to focus on the input: </label>
<input type="text" id="username">

Propagation

Demo for the propagation. When you click on the label, the checkbox is checked/unchecked

  • The HTML
<label for="checkbox">Click on me to check/uncheck the checkbox</label>
<input id="checkbox" type="checkbox" />
  • The result: click on the label

Documentation / Reference