Label htmlFor Property Explained
Tags: javascript, webdev, beginners
Published: 2023-02-06 20:15:44

> ✋ **Update:** This post was originally published on my blog [decodingweb.dev](https://www.decodingweb.dev), where you can read the [latest version](https://www.decodingweb.dev/label-htmlfor-property-explained) 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:

```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

```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:

```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:

```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:

```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 - this property would return an empty value:

```html
<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.

```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.

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.