Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Label htmlFor Property

  • Difficulty Level : Basic
  • Last Updated : 26 Feb, 2019
Geek Week

The DOM Label htmlFor Property is used to set or return the value of the for attribute of a <label> element. The For attribute defines which form element will be labeled.

Syntax:

  • It is used to return the htmlFor property:
    labelObject.htmlFor
  • It is used to set the htmlFor property:
    labelObject.htmlFor = id

Property Values:

  • id: It defines an id attribute of the element that should be labeled.

Return Value: It returns a string value which represents the id of the element that will be labeled.

Example-1: HTML Program that illustrates how to return the property.






<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Label htmlFor Property
  </title>
  
    <style>
        body {
            font-size: 20px;
        }
    </style>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">GeeksforGeeks
  </h1>
    <h2>DOM Label htmlfor Property</h2>
  
    <form>
  
        <!-- Starts label tag from here -->
        <label for="student" 
               id="GFG">
            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>
    <br>
    <button onclick="myGeeks()">Submit
  </button>
    
    <p id="sudo"></p>
    <script>
        function myGeeks() {
            
            // Return htmlfor property.
            var g = 
            document.getElementById("GFG").htmlFor;
            document.getElementById("sudo").innerHTML = 
              g;
        }
    </script>
</body>
  
</html>

Output:

Before Clicking On Button:

After Clicking On Button:

Example-2: HTML Program that illustrates how to set the htmlFor property.




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Label htmlFor Property
  </title>
  
    <style>
        body {
            font-size: 20px;
        }
    </style>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">GeeksforGeeks
  </h1>
    
    <h2>DOM Label htmlfor Property</h2>
  
    <form>
  
        <!-- Starts label tag from here -->
        <label for="student" 
               id="GFG">
            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>
    <br>
    <button onclick="myGeeks()">Submit
  </button>
    
    <p id="sudo"></p>
    <script>
        function myGeeks() {
            
            // Set htmlfor property.
            var g = 
           document.getElementById("GFG").htmlFor = 
                "Employes"
            document.getElementById("sudo").innerHTML = 
          "The value of the For attribute was "
            "changed from student to " + g;
        }
    </script>
</body>
  
</html>

Output :

Before Clicking On Button:

After Clicking On Button:

Supported Browsers: The browser supported by DOM Label htmlFor Property are listed below:

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

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 :