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>
refresh

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">
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments