# Any “X” descendant of a “label” element with a “for” attribute must have an ID value that matches that “for” attribute.

> Canonical HTML version: https://rocketvalidator.com/html-validation/any-x-descendant-of-a-label-element-with-a-for-attribute-must-have-an-id-value-that-matches-that-for-attribute
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A `label` element with a `for` attribute contains a form control whose `id` is missing or doesn't match the `for` value.

A `label` can be tied to its control in two ways: by wrapping the control, or by naming the control's `id` in `for`. When `for` is present, it alone picks the labeled control, and the label may not contain any other labelable element. The labelable elements are `button`, `input` (except `type="hidden"`), `meter`, `output`, `progress`, `select` and `textarea`, and the message names the one that broke the rule.

The browser follows `for` and ignores the nested control. If `for` points at an `id` that doesn't exist, the label has no control at all: clicking its text does nothing, and the control inside can end up without an accessible name.

A `button` usually gets here through a search form that wraps both the search field and its submit button in one `<label for="search-field">`. The field's `id` matches, but the button can't share it because every `id` in a page must be unique. The validator also reports that the label holds more than one labelable descendant, and screen readers may read the button's text as part of the field's name.

Close the label before the button, or move the button out of it, so the label holds only the control it names. When the label wraps a single control, either give that control an `id` equal to the `for` value, or remove `for` and let the wrapping make the association.

## Invalid example

```html
<form role="search" action="/search">
  <label for="search-field">
    Search for:
    <input type="search" id="search-field" name="q">
    <button type="submit">Search</button>
  </label>
</form>
```

## Valid example

```html
<form role="search" action="/search">
  <label for="search-field">
    Search for:
    <input type="search" id="search-field" name="q">
  </label>
  <button type="submit">Search</button>
</form>
```