How to use the Label htmlFor Property in JavaScript
The Label htmlFor property enables us to modify labels’ for
property via JavaScript. We use the HTML <label>
element to caption form elements, such as a text box, checkbox, radio button, etc.
🎧 Debugging Jam
Calling all coders in need of a rhythm boost! Tune in to our 24/7 Lofi Coding Radio on YouTube, and let's code to the beat – subscribe for the ultimate coding groove!" Let the bug-hunting begin! 🎵💻🚀
![24/7 lofi music radio banner, showing a young man working at his computer on a rainy autmn night with hot drink on the desk.](https://www.decodingweb.dev/wp-content/themes/lisboa/assets/img/radio-banner.webp)
To do so, all you need to do is to set the label’s for
attribute with the ID string of its corresponding form element – this means your form element (e.g, a radio button) should already have an ID attribute.
Something like this:
<form action=some-url>
<label for=usernameId>Username: <label>
<input type=text name=username id=usernameId>
<br>
<input type=submit value=Submit>
</form>
Labelling form elements have multiple accessibility advantages:
📢 Assistive technologies: It makes the label and the form element programmatically related. For instance, a screen reader would read out the form element's label to visually-impaired users.
📲 Accessibility and UX: It also increases the hit area when interacting with a form element (click or touch); For instance, when you click the label of a text box, it'll gain focus, so you can start typing. Or if it's a checkbox (or a radio button), it'll be checked - a pleasant experience on small-screen devices.
Here's an example
<section>
<label for=usernameControl>Username: </label>
<input type=text id=usernameControl name=username>
</section>
<section>
<input type=checkbox id=checkControl>
<label for=checkControl>Click me</label>
</section>
<section>
<input type=radio id=radioControl1 name=radioControl>
<label for=radioControl1>Option 1</label>
<input type=radio id=radioControl2 name=radioControl>
<label for=radioControl2>Option 2</label>
<input type=radio id=radioControl3 name=radioControl>
<label for=radioControl3>Option 3</label>
</section>
But sometimes you might need to manage (set or get) a label's for
property dynamically, from your JavaScript code.
In this quick guide, I'll explain how you can programmatically manage the for
attribute with the help of the htmlFor
property via JavaScript.
![Woman thinking](https://www.decodingweb.dev/wp-content/themes/lisboa/assets/img/woman-thinking.png)
Psssst! Do you want to learn web development in 2023?
![Pixel question mark](https://www.decodingweb.dev/wp-content/themes/lisboa/assets/img/pixel-question-mark.png)
How to use the htmlFor
property
The HTMLLabelElement.htmlFor
lets you read the for
attribute's current value. It also allows you to set its value on the fly.
Let's start with a quick example for those friends who need a short snippet for today. Then, we'll get to the details.
Let's imagine we have the following form control:
<form action=some-url>
<label for=usernameId>Username: <label>
<input type=text name=username id=usernameId>
<br>
<input type=submit value=Submit>
</form>
To read the value of the for
attribute, you can access its htmlFor
property in the DOM like so:
// Get the DOM element by Id
let label = document.querySelector('#usernameLabel')
// Access the htmlFor property
let forValue = label.htmlFor
And if you need to set the for
value programmatically at runtime:
// Get the DOM element by Id
let labelElement = document.querySelector('#usernameLabel')
// Set the for attribute value via htmlFor property
labelElement.htmlFor = 'someValue'
In the above example, someValue
is the ID of the element to which the label is associated.
Please note when a label is implicitly associated with a form control - by placing the form element within the label tag - this property would return an empty value:
<label>
Username:
<input type="text">
</label>
Can't we just use setAttribute/getAttribute?
Since the htmlFor
property reflects the value of the for
attribute, technically, it's possible to use setAttribute
to set the for
attribute of a label.
let labelElement = document.querySelector('#usernameLabel')
let forValue = labelElement.setAttribute('for', 'someValue')
However, Mozilla recommends using htmlFor
whenever you need to set the for
attribute programmatically.
Browser support
The htmlFor
property is well-supported across most web browsers:
![Browser support for htmlFor attribute. Source: MDN Web Docs](https://www.decodingweb.dev/wp-content/uploads/2022/11/htmlfor-browser-support-1024x386.webp)
Wrapping up
The for
attribute helps you add interactive behavior to a web page without writing a single line of JavaScript. For instance, to create custom checkbox/radio button elements or even trigger a popup or a sliding menu. However, if you need more control over your labels from javaScript code, label's htmlFor
is the property you need.
Thanks for reading.
Never miss a guide like this!
Disclaimer: This post may contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.