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">
- A click on the label brings you in the input field
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