HTML <label> Tag

The <label> defines a text label for the <input> tag. The label is an ordinary text, clicking on which, the user can select the form element. It facilitates the use of the form, since it is not always convenient to get into the form elements with the cursor.

Syntax

The <label> tag comes in pairs, the text is placed between the opening (<label>) and the closing (</label>) tags.

The <label> tag is also used to define keyboard shortcuts and jump to the active element like links.

There are two ways to associate a text label and the form to which it belongs:

  1. Set the identifier (id) inside the form element and specify its name as the for attribute for the <label> tag.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="lfname">First name:</label> 
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Result

  1. Insert the form into the <label> element.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label>Name
      <input id="User" name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Result

Example (form with check boxes)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona"><br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid"><br />
    </form>
  </body>
</html>

Result

Use CSS font properties to style the <label> element.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label>Your  Name:</label>
      <input id="User" name="Name" type="text"/>
    </form>
  </body>
</html>

Result

Attributes

Attribute Value Description
accesskey accesskey Defines a hot key with which you can go to the attached to the label (through the for attribute) form element.
for element_id Sets the ID of the element to which the label should be bound.
form form_id Specifies the form (s) with which the label will be associated. This attribute allows you to place tags in an arbitrary location in the document, and not just as a descendant of the <form> element.
Obsolete.

The <label> element also supports the Global Attributes and the Event Attributes.

Browser support