Label htmlFor Property Explained

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 the 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-example.html
 <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

  • label-accessibility.html
 <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-example.html
 <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:

  • htmlfor-read.js
 // 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:

  • htmlfor-write.js
 // 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 - Label htmlFor would return an empty value:

  • implicit-label-example.html
 <label>
    Username: 
    <input type="text">
</label> 

Can't we just use setAttribute/getAttribute instead of htmlFor?

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.

  • label-set-attribute.js
 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. And for the sake of consistency, I would stick to using htmlFor too.

Browser support for Label htmlFor

Label htmlFor property is well-supported across most web browsers and is definitely safe to use:

Browser support for htmlFor attribute. Source: MDN Web Docs
Browser support for htmlFor attribute. Source: MDN Web Docs

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.

Author photo

Hey 👋 I'm a software engineer, an author, and an open-source contributor. I enjoy helping people (including myself) decode the complex side of technology. I share my findings on Twitter: @lavary_

If you read this far, you can tweet to the author to show them you care. Tweet a Thanks

In this article:

Disclaimer: This post might contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.