HTML5 label tag examples

Label element (<label>) represents a caption and can be used with one form input element. There are two ways to associate a label to an input element (text, checkbox, radio, etc.)

1. By placing the input element inside label element.
2. By assigning the id of input element to the for attribute of label.

Label example with nested input element

Here user can click on name or checkbox label to select/toggle.

<label>Name
  <input type="text" placeholder="First Name" value="">
</label>
<br/><br/>
<label>Checkbox label
  <input type="checkbox" value="checkbox1">
</label>

Label example using attribute for

Here user can click on name or checkbox label to select/toggle.

<label for="name">Name</label>
<input id="name" type="text" placeholder="First Name" value="">
<br/><br/>
<label for="checkbox1">Checkbox label</label>
<input id="checkbox1" type="checkbox" value="checkbox1">

Related

• label documentation at MDN

Specification

• W3C HTML5 label specification