HTML <label> Tag

The HTML <label> tag enables to rendering of the caption for the specific items in the webpage. It is used to provide a usability improvement for mouse users i.e., if a user clicks on the text within the <label> element, it toggles the control.

The <label> tag can be used in 2 ways:

Firstly, use the <label> tag by providing the <input> and id attributes. The <label> tag needs an “for” attribute whose value is the same as the input id.
It uses the for attribute to connect the label with the id of the form element, its labeling
Alternatively, the <input> tag is used directly inside the <label> tag. In this case, the for and id attributes are not needed because the association is implicit.

Supported Tags

The <label> tag can be defined with the following Tags:

Syntax

<label> form content... </label>

Attribute Value

Attribute Value	Descriptions
for	It refers to the input control that this label is for. Its value must be the same as the value of the input control’s “id” attribute.
form	It refers to the form to which the label belongs to.

Example 1: This example illstrates the basic usage of the <lable> tag in HTML. Here, we will use the input tag outside the label tag.

html

<!DOCTYPE html>

<html>
 
<body>

    <h1>GeeksforGeeks</h1>

    <strong>HTML label Tag</strong>
 
    <form>

        <!-- Starts label tags from here -->

        <label for="student">

            Student

        </label>

        <input type="radio"

               name="Occupation"

               id="student"

               value="student"><br>
 
        <label for="business">

            Business

        </label>

        <input type="radio"

               name="Occupation"

               id="business"

               value="business"><br>
 
        <label for="other">

            Other

        </label>

        <!-- Ends label tags here -->
 
        <input type="radio"

               name="Occupation"

               id="other"

               value="other">

    </form>

</body>
 
</html>

Output:

Example 2: In this example, we will use the input tag inside the label tag.

html

<!DOCTYPE html>

<html>
 
<body>

    <h1> GeeksforGeeks</h1>

    <strong> HTML label Tag</strong>

    <form>

        <!-- label tag starts from here -->

        <label>

            Male

            <input type="radio"

                   name="gender"

                   id="male"

                   value="male" />

        </label><br />
 
        <label>

            Female

            <input type="radio"

                   name="gender"

                   id="female"

                   value="female" />

        </label><br />
 
        <label>

            Other

            <input type="radio"

                   name="gender"

                   id="other"

                   value="other" />

        </label>

        <!-- label tag ends from here -->

    </form>

</body>
 
</html>

Output:

Supported Browsers

Google Chrome 1 and above
Edge 12 and above
Firefox 1 and above
Opera 15 and above
Safari 4 and above

Article Tags :

HTML

Web Technologies

HTML-Tags