Label htmlFor Property Explained

✋ Update: This post was originally published on my blog decodingweb.dev, where you can read the latest version for a 💯 user experience. ~reza

We use the HTML <label> element to caption form elements, such as a text box, checkbox, radio button, etc.

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 should already have an ID attribute.

Something like this:

<label for="usernameId">Username: <label>
<input type="text" name="username" id="usernameId">

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" name="username" id="usernameControl">
</section>

<section>
    <input type="checkbox" id="checkControl">
    <label for="checkControl">Click me</label>
</section>

<section>
    <input type="radio" name="radioControl" id="radioControl1">
    <label for="radioControl1">Option 1</label>

    <input type="radio" name="radioControl" id="radioControl2">
    <label for="radioControl2">Option 2</label>

    <input type="radio" name="radioControl" id="radioControl3">
    <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 Label htmlFor property via JavaScript.

How to use the Label 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:

<label for="usernameId">Username: <label>
<input type="text" name="username" id="usernameId">

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 string of the form control 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.

Label htmlFor property is well-supported across most web

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'll need.

I hope this quick guide can provide an answer to your question.

Thanks for reading.