The Speed Coding

HTML <label> Tag


Example

Three radio buttons with labels:

<form action="/action_page.php" >
  <label for="male" > Male</label>
  <input type="radio" name ="gender" id="male" value="male" > <br>
  <label for="female">Female</label >
  <input type="radio" name="gender" id="female" value="female" > <br>
  <label for="other" > Other</label>
  <input type="radio" name ="gender" id="other" value="other" > <br> <br>
  <input type="submit" value="Submit" >
</form>

Definition and Usage

The <label> tag defines a label for several elements:

Proper use of labels with the elements above will benefit:

  • Screen reader users (will read out loud the label, when the user is focused on the element)
  • Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area). 

Tips and Notes

Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element. 


Browser Support

Element
<label> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
for element_id Specifies the id of the form element the label should be bound to
form form_id Specifies which form the label belongs to

Global Attributes

The <label> tag also supports the Global Attributes in HTML.


Event Attributes

The <label> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: Label Object


Default CSS Settings

Most browsers will display the <label> element with the following default values:

Example

label {
  cursor: default;
}