HTML <label> Tag

The <label> tag adds a short description to an input field. To bind (associate) the label to an input field the for attribute is used.

HTML Tag

Example

#

A <label> that is associated with an 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>

Using <label>

The <label> tag adds a caption or title to an input field.

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.

More Examples

<label> tags are placed either above or before <input> elements.
Here they are placed before.

Vehicle Details  

 

 

<form action="/tutorial/action.html">
  <fieldset>
    <legend>Vehicle Details</legend>

    <label for="model">Model</label> &nbsp;
    <input type="text" id="model" name="model"><br /><br />

    <label for="make">Make</label> &nbsp;
    <input type="text" id="make" name="make"><br /><br />

    <label for="year">Year</label> &nbsp;
    <input type="text" id="year" name="year"><br /><br />

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

Attributes for <label>

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.


Binding labels to input elements

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:

1)  With a for attribute -- mostly used by <input> fields and <textarea> elements.
<label for="city">City</label>
<input type="text" name="city" id="city">

Note: Clicking the label will put focus on the associated textbox.


2)  By placing an element inside the <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.


Form Tags

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, these tags 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

Browser support

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

You may also like

Guides