HTML | DOM Label htmlFor Property
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> |
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
Please Login to comment...