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 >
< 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 >
< 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 >
< 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 >
< 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
Last Updated :
02 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...