Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

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

Label tag



Last Updated : 24 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads