The <label> tag adds a short description to an input field.
Use the for attribute attribute to bind (associate) the label to an input field.
This <label> is bound to the input field.
Click the label and focus is placed on the input field.
<form>
<label for="firstname">First Name</label><br />
<input type="text" id="firstname" name="firstname">
</form>
A <label> renders text that provides a brief description about an input field.
Labels are usually placed before the associated input element.
The for attribute binds (i.e. associates) a label to an input element.
Note: When a bound <label> is clicked, focus is placed on the associated input element.
<label> tags are placed either above or before <input> elements.
Here they are placed before.
<form action="/tutorial/action.html">
<fieldset>
<legend>Vehicle Details</legend>
<label for="model">Model</label>
<input type="text" id="model" name="model"><br /><br />
<label for="make">Make</label>
<input type="text" id="make" name="make"><br /><br />
<label for="year">Year</label>
<input type="text" id="year" name="year"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
This table lists the <label> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| for | element-id | Element a label is bound to. |
| id | identifier | Defines a unique identifier for the label. |
| class | classnames | Sets one or more CSS classes to be applied to the label. |
| style | CSS-styles | Sets the style for the label. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the label is hidden. |
| title | text | Sets a title that displays as a tooltip. |
For additional global attributes see our global attributes list.
Label binding is something that developers overlook too often.
Having labels bound to elements provides a better user experience with little effort.
This is particular true for checkboxes and radio buttons which should have bound labels.
A <label> is bound to an element in one of two ways:
<label for="city">City</label>
<input type="text" name="city" id="city">
Note: Clicking the label will put focus on the associated textbox.
<label> -- mostly used by <radio> buttons and <checkbox> elements.
<label>
<input type="checkbox" value="Approved">
Approved
</label>
Note: Clicking the label toggles the associated checkbox.
The <label> tag is part of a group of tags
that are used to create data entry forms.
This group is referred to as the Form tag group.
Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
| Element | Description |
|---|---|
| <form> | Defines a data entry area that contains input elements |
| <input> | Creates an input field in which data can be entered |
| <label> | Creates a label or brief description before input elements |
| <textarea> | Creates a multi-line text input control |
| <select> | Creates a dropdown control |
| <button> | Creates a clickable button that can contain text or an image |
| <datalist> | Specifies a list of options for a textfield (<input>) element |
| <fieldset> | Groups related form elements and displays a box with a legend around these |
| <legend> | Defines a caption for a fieldset |
Here is when <label> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
