HTML - Label

About

The label ¹⁾ 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

Documentation / Reference

• https://html.spec.whatwg.org/multipage/forms.html#the-label-element