Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Label htmlFor Property
The HTML DOM Label htmlFor property is used to get or set the value of the for attribute of a label element. The for attribute creates an association between a label and a form control, improving accessibility and user experience by allowing users to click the label to focus or activate the associated form element.
Syntax
Following is the syntax for getting the for attribute value −
labelObject.htmlFor
Following is the syntax for setting the for attribute value −
labelObject.htmlFor = "elementId"
Return Value
The htmlFor property returns a string representing the ID of the form element that the label is associated with. If no association exists, it returns an empty string.
Example − Getting htmlFor Value
Following example demonstrates how to retrieve the htmlFor property value −
<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label id="emailLabel" for="email">Email Address:</label>
<input type="email" id="email" name="email">
<br><br>
<button type="button" onclick="showHtmlFor()">Show htmlFor Value</button>
<p id="result"></p>
</form>
<script>
function showHtmlFor() {
var label = document.getElementById("emailLabel");
var result = document.getElementById("result");
result.textContent = "htmlFor value: " + label.htmlFor;
}
</script>
</body>
</html>
The output shows the ID of the associated form element −
htmlFor value: email
Example − Setting htmlFor Value
Following example demonstrates how to dynamically change the htmlFor property −
<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor Property - Set Value</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Label-htmlFor</legend>
<label id="CurrentEditor" for="editorTwo">Current Editor:</label><br>
<input type="text" id="editorOne" placeholder="editorOne">
<input type="text" id="editorTwo" placeholder="editorTwo">
<input type="button" onclick="getEventData()" value="Change Editor">
<div id="divDisplay">Label for attribute set as editor two</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var labelSelect = document.getElementById("CurrentEditor");
function getEventData() {
if(labelSelect.htmlFor === 'editorTwo'){
divDisplay.textContent = 'Label for attribute set as editor one';
labelSelect.htmlFor = 'editorOne';
}
}
</script>
</body>
</html>
Initially, the label is associated with "editorTwo". Clicking the button changes the association to "editorOne" and updates the display text accordingly.
Example − Complete Toggle Functionality
Following example shows a complete toggle between two form elements −
<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor Toggle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label id="activeLabel" for="input1">Active Field:</label><br><br>
<input type="text" id="input1" placeholder="Input 1" style="margin: 5px;">
<input type="text" id="input2" placeholder="Input 2" style="margin: 5px;">
<br><br>
<button type="button" onclick="toggleLabel()">Toggle Association</button>
<p id="status">Currently associated with: input1</p>
</form>
<script>
function toggleLabel() {
var label = document.getElementById("activeLabel");
var status = document.getElementById("status");
if (label.htmlFor === "input1") {
label.htmlFor = "input2";
status.textContent = "Currently associated with: input2";
} else {
label.htmlFor = "input1";
status.textContent = "Currently associated with: input1";
}
}
</script>
</body>
</html>
This example provides complete toggle functionality, switching the label association between two input fields and updating the status display.
Key Points
-
The
htmlForproperty corresponds to the HTMLforattribute of label elements. -
It creates accessibility connections between labels and form controls.
-
Clicking a properly associated label will focus or activate the linked form element.
-
The property accepts and returns string values representing element IDs.
-
It can be both read and modified dynamically using JavaScript.
Browser Compatibility
The htmlFor property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 5.5+. It is part of the standard DOM Level 1 specification.
Conclusion
The HTML DOM Label htmlFor property provides a programmatic way to get and set label associations with form elements. This property is essential for creating accessible web forms and enables dynamic form behavior by allowing JavaScript to modify label-control relationships at runtime.
249 Views
