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>
  <labelfor="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>

Try it Yourself »

---

Definition and Usage

The <label> tag defines a label for a <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

---

Browser Support

Element
<label>	Yes	Yes	Yes	Yes	Yes

---

Tips and Notes

Tip: A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element.

---

---

Differences Between HTML 4.01 and HTML5

The "form" attribute is new in HTML5.

---

Attributes

= New in HTML5.

Attribute	Value	Description
for	element_id	Specifies which form element a label is bound to
form	form_id	Specifies one or more forms 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;}

Try it Yourself »