# Bad value “X” for attribute “for” on element “label”: An ID must not contain whitespace.

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

The `<label>` element represents a caption for a form control. When you use the `for` attribute, its value must match the `id` of the form control it labels. According to the HTML specification, an `id` attribute value must not contain any whitespace characters — this includes spaces, tabs, line feeds, carriage returns, and form feeds. Since `for` must reference a valid ID, the same restriction applies to its value.

This error typically occurs when a developer uses a space-separated name (like `"user name"` or `"first name"`) instead of a single continuous token. Browsers may fail to establish the programmatic association between the label and its form control when the `for` value contains whitespace. This directly impacts accessibility: screen readers rely on this association to announce the label text when a user focuses on the input. It also breaks the click-to-focus behavior where clicking a label moves focus to its associated control.

To fix this issue, replace any whitespace in the `for` attribute value with a valid character such as a hyphen (`-`), underscore (`_`), or camelCase. Make sure the `id` on the corresponding form control matches exactly.

## Examples

### Incorrect — whitespace in the `for` attribute

```html
<form>
  <label for="user name">Name</label>
  <input type="text" id="user name">
</form>
```

The value `"user name"` contains a space, which makes it an invalid ID reference. The validator will report: *Bad value "user name" for attribute "for" on element "label": An ID must not contain whitespace.*

### Correct — using an underscore instead of a space

```html
<form>
  <label for="user_name">Name</label>
  <input type="text" id="user_name">
</form>
```

### Correct — using a hyphen instead of a space

```html
<form>
  <label for="user-name">Name</label>
  <input type="text" id="user-name">
</form>
```

### Correct — using camelCase

```html
<form>
  <label for="userName">Name</label>
  <input type="text" id="userName">
</form>
```

### Incorrect — leading or trailing whitespace

Whitespace doesn't have to be in the middle of the value to trigger this error. Leading or trailing spaces also make the ID invalid:

```html
<form>
  <label for=" email">Email</label>
  <input type="text" id=" email">
</form>
```

This can be easy to miss when values are generated dynamically or copied from another source. Trim the value to fix it:

```html
<form>
  <label for="email">Email</label>
  <input type="text" id="email">
</form>
```

### Alternative — wrapping the input inside the label

If you wrap the form control inside the `<label>` element, you don't need the `for` attribute at all. The association is implicit:

```html
<form>
  <label>
    Name
    <input type="text">
  </label>
</form>
```

This approach avoids potential ID mismatches entirely, though explicit `for`/`id` pairing is often preferred for flexibility in layout and styling.