Open In App

HTML <label> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 13 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads