Description

The HTML element <label> is used to define a title or caption for a form control, where each label is associated with not more than one form control.

A label can be associated with a form control in two ways.

  • Place the control element inside the label element.
  • Use the for attribute on the <label> element, which must match the id attribute of the control element.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain Inline elements and text.
Tags Both opening and closing tags are required.
Versions HTML 4, 4.01, 5

Syntax

Here is the basic syntax of the <label> element.

<label>...</label>

Examples

In the below example, the <label> element is used to define a title to the form input elements.

  • For the name input, the label is defined using the for attribute
  • For the email input, the label is defined by placing the input element inside the label element
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Element - label</title>
</head>
<body>
        <form action="http://www.example.com/" method="post">
        <fieldset>
            <legend>User Details</legend>
            
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br><br>
            
            <label>Email: <input type="email" id="email" name="email"></label>
        </fieldset>
    </form>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <label> element.

Attribute Type Details
Element-Specific Attributes The tags <label> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <label> supports the HTML Global Attributes.
Event Attributes The tags <label> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <label> element.

Attribute Value Description
for form-control-id Specifies which form control a label is associated with.
form  form-id Specifies the <form> element that the <label> element is associated with.

Browser Compatibility

The tags <label> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 4+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 4+

Related Links