Skip to content
Related Articles

Related Articles

Improve Article

HTML <label> Tag

  • Difficulty Level : Basic
  • Last Updated : 15 Feb, 2021

The <label> tag in HTML 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 defines the label for <button>, <input>, <meter>, <output>, <progress>, <select>, or <textarea> element.

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 the 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.

Syntax:  

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

Attribute Value: 

  • 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: Here we will use the input tag outside the level 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: Here we will use the input tag inside the level 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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :