HTML <label> (Form Control Label) Tag

<form action="action.php">
  <input type="radio" id="html" name="language" value="HTML">
  <label for="html">HTML</label>

  <input type="radio" id="css" name="language" value="CSS">
  <label for="css">CSS</label>

  <input type="radio" id="javascript" name="language" value="JavaScript">
  <label for="javascript">JavaScript</label>

  <input type="submit" value="Submit">
</form>

Meaning

The <label> element is used to relate descriptions to form controls.

Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

Tip: The <label> element provides a usability improvement by making the form more accessible for mouse users. It provides a much larger clickable area for small elements link checkbox, radio

Version: HTML 4, 4.01, 5

Standard Syntax

<label for="elementId">...</label>

Browser Support

Status

Attributes

Interactive content

Don't place interactive elements such as anchors or buttons inside a label.

It difficult for people to activate the form input associated with the label.

Bad Practice

<label for="example">
	<input id="example" type="checkbox" name="terms-and-conditions">
	I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Good Practice

<label for="example">
	<input id="example" type="checkbox" name="terms-and-conditions">
	I agree to the Terms and Conditions
</label>
<p>
	<a href="terms-and-conditions.html">Read Terms and Conditions</a>
</p>

Headings

Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation purpose.

If the label's text needs to be customize, use CSS classes.

If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.

Bad Practice

<label for="fname">
	<h3> First Name</h3>
	<input id="fname" name="fname" type="text">
</label>

Good Practice

<label class="csslabel" for="fname">
	First Name
	<input id="fname" name="fname" type="text">
</label> 

Button

An <input> element with a <input type="button"> declaration and a valid value attribute does not need a label associated with it.

Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

Global Attributes

<label> element also supports the Global Attributes in HTML.

Event Attributes

<label> element also supports the Event Attributes in HTML.

By Default CSS Value(s)

Most of the browsers will display the <label> element with the following by default value(s)

label {
	cursor: default;
}