Skip to content
Related Articles

Related Articles

Improve Article

How to specify which form element a label is bound to ?

  • Last Updated : 13 Apr, 2021

The label tag in HTML allows us to click on the label, which will in turn be treated like clicking on the corresponding input type. Input types in the HTML can be a radio button, checkbox, email, date, color, etc. The for attribute specifies which form element a label is bound to. 

Syntax: 

<label for="element_id"> Label Content </label>

Example 1: 

HTML




<!DOCTYPE html>
<html lang="en">
  <body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
  
    <h2>Label for attribute</h2>
  
    <p>Please click on the labels to select the radio button</p>
  
    <form>
      <label for="Student">Student</label>
      <input type="radio" name="Category" id="Student" value="Student" />
      <br />
  
      <label for="WorkingProfessional">
         Working Professional
      </label>
      <input
        type="radio"
        name="Category"
        id="WorkingProfessional"
        value="WorkingProfessional"/>
      <br />
  
      <label for="Retired">Retired</label>
      <input type="radio" name="Category" 
             id="Retired" value="Retired" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Output:



Label for attribute

If we click on Student, the corresponding radio button will be selected, thus increasing the selection area. This is done with the help of a label tag for attributes.  

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
  <body style="text-align: center">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h2>Label Tag</h2>
  
    <p>Please click on the labels to select the radio button</p>
  
    <form>
      <label for="Four Wheeler">Four Wheeler</label>
      <input
        type="radio"
        name="Category"
        id="Four Wheeler"
        value="Four Wheeler"/>
      <br />
  
      <label for="Two Wheeler">Two Wheeler</label>
      <input
        type="radio"
        name="Category"
        id="Two Wheeler"
        value="Two Wheeler"/>
      <br />
  
      <label for="Others">Others</label>
      <input type="radio" name="Category" 
             id="Others" value="Others" />
      <br />
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Output:

Label tag

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :