HTML <label> (Form Control Label) Tag

❮ Previous Reference Next ❯


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


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



Attribute Value Description
for elementId This attribute specifies the id for the form control element the label references.

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>

Good Practice

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


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

Good Practice

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


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;

Related Tags:

<button>, <datalist>, <fieldset>, <form>, <input>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select> and <textarea>
❮ Previous Reference Next ❯