HTML | label Tag

The <label> tag in HTML is used to provide a usability improvement for mouse users i.e, if a users clicks on the text within the <label> element, it toggles the control. The <label> tag defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

Syntax:

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

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



  • Firstly, use <label> tag by providing the <input> and id attribute. The <label> tag needs a for attribute whose value is same as input id.
  • Alternatively, <input> tag use directly inside the <label> tag. In this case the for and id attributes are not needed because the association is implicit.

Attribute Value: This tag contains two attribute for and form.

Method 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- HTML code to illustrates label tag -->
<!DOCTYPE html>
<html>
    <head>
        <title>Label Tag</title>
          
        <style>
            body {
                font-size: 20px;
            }
        </style>
    </head>
      
    <body style = "text-align:center">
          
        <h1 style = "color:green">GeeksforGeeks</h1>
        <h2>label tag</h2>
          
        <form>
              
            <!-- Starts label tag 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>                    

chevron_right


Output:
label

Method 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Label Tag</title>
    </head>
      
    <body style = "text-align:center">
          
        <h1 style = "color:green">
            GeeksforGeeks
        </h1>
          
        <h2>
            label tag
        </h2>
          
        <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>                    

chevron_right


Output:
label

Supported Browsers: The browser supported by label tag are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.