label element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The label element represents a label which can be associated to a form control, and is supposed to provide a short description for it. Browsers may link both elements by allowing users to set the focus to the control by clicking on its label.

There are two ways to associate a label with a control: by inserting both, the label text and the control inside label; or by matchin the values of the id attribute in the control and the for attribute in the label.

HTML5 has introduced the attribute form, for certain form related elements, allowing authors to explicitly associate a control with a form. However, this attribute has been recently removed from the label element due to its lack of utility.

Examples

In the first example, we'll create a simple login form and associate a couple of labels to both present controls (a text input and a password input). In this case, we'll make the association by including the label and the control as content of the label element.

You'll be able to see here how you browser associates both elements by interaction: try clicking the label and see how the associated control automatically gets the focus.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Username: <input type="text" name="user"></label></p>
  <p><label>Password: <input type="password" name="pass"></label></p>
  <p><input type="submit" value="Send data"></p>
</form>

Now, we'll be associating labels to controls with the second method: by making the attributes id in the control and for in the label, match.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label for="thoughts_id">A penny for your thoughts:</label></p>
  <p><input type="text" name="thoughts" id="thoughts_id"></p>
  <p><input type="submit" value="Send data"></p>
</form>

Attributes

Specific attributes

for

A token matching the value of the id attribute of the control this label is assopciated with.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p><label for="nummovies_id">How many movies have you seen this year?</label></p>
  <p><input type="number" name="nummovies" id="nummovies_id"></p>
  <p><input type="submit" value="Send data"></p>
</form>

form

A token matching the value of the id attribute of the form this label is assopciated with.

The form attribute has been recently removed from the label element due to its lack of utility.

Example

<p><label for="name_id" form="form1">Name:</label></p>
<form id="form1" action="../../form-result.php">
  <p><input type="text" name="namefield" id="name_id"></p>
  <p><input type="submit" value="Send data"></p>
</form>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.