HTML DOM Label htmlFor Property

Last Updated : 02 Jun, 2023

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.

html

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

html

<!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 = 
                "Employees"
            document.getElementById("sudo").innerHTML = 
          "The value of the For attribute was "
            "changed from student to " + g;
        }
    </script>
</body>
 
</html>