# Bad value “” for attribute “for” on element “label”: An ID must not be the empty string.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-for-on-element-label-an-id-must-not-be-the-empty-string
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `for` attribute on a `<label>` element tells the browser which form control the label describes. When a user clicks or taps the label, the browser transfers focus to the associated control. For this to work, the value of `for` must exactly match the `id` of a form element such as an `<input>`, `<textarea>`, `<select>`, or `<button>`.

An empty string (`""`) is not a valid ID according to the HTML specification. The WHATWG HTML standard requires that an `id` attribute value must contain at least one character and must not contain ASCII whitespace. Since no element can have an empty-string `id`, a `<label>` with `for=""` can never successfully reference anything, making it both invalid markup and a broken association.

## Why this matters

**Accessibility:** Screen readers rely on the `for`/`id` pairing to announce what a form control is for. A label with an empty `for` attribute creates no programmatic association, meaning assistive technology users may not know what a field is asking for. This directly impacts WCAG compliance.

**Usability:** A properly associated label expands the clickable area of its form control. For example, clicking a label associated with a checkbox will toggle the checkbox. An empty `for` attribute breaks this behavior.

**Standards compliance:** The W3C validator flags this because it violates the HTML specification. Keeping markup valid helps ensure consistent behavior across browsers and future-proofs your code.

## How to fix

You have three options:

1. **Set `for` to a valid `id`:** Give the associated form control a unique `id` and reference it in the label's `for` attribute.
2. **Remove `for` and use implicit association:** Wrap the form control inside the `<label>` element. This creates an implicit association without needing `for` or `id` at all.
3. **Remove the `for` attribute:** If the label is purely decorative or not meant to be associated with a control, simply remove the empty `for` attribute.

## Examples

### ❌ Empty `for` attribute (triggers the error)

```html
<label for="">Username:</label>
<input type="text" name="username">
```

The label has no meaningful association with the input because `for=""` is not a valid reference.

### ✅ Fix: Use a valid `for`/`id` pair

```html
<label for="username">Username:</label>
<input type="text" id="username" name="username">
```

The `for="username"` now matches `id="username"` on the input, creating an explicit association.

### ✅ Fix: Use implicit association by nesting

```html
<label>
  Username:
  <input type="text" name="username">
</label>
```

Wrapping the input inside the `<label>` creates an implicit association. No `for` or `id` attributes are needed.

### ❌ Multiple labels with empty `for` attributes

```html
<form>
  <label for="">Email:</label>
  <input type="email" name="email">
  <label for="">Subscribe to newsletter</label>
  <input type="checkbox" name="subscribe">
</form>
```

### ✅ Fixed with proper associations

```html
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <label for="subscribe">Subscribe to newsletter</label>
  <input type="checkbox" id="subscribe" name="subscribe">
</form>
```

Each `id` must be unique within the document, and each `for` attribute must reference exactly one `id`. If your labels are generated by a framework or CMS with empty `for` values, check the template or component configuration to ensure proper `id` values are being output.