# Zawartość powiązana z elementem "label"

Do kategorii zawartość powiązana z elementem label  należą przede wszystkim elementy HTML, które mogą zostać w jakikolwiek sposób powiązane z elementem label.

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FNXVqtaJYNu3Q4grvR1Is%2Fimage.png?alt=media&#x26;token=eb175de3-4357-4caa-b424-34f39c0ba6b2" alt=""><figcaption></figcaption></figure>

Przykład:

```html
<p>
  <label>
    Jakie jest Twoje imię?
    <input type="text" name="imie">
  </label>
</p>

<p>
  <label for="dana-1">Jaki jest Twój ulubiony kwiat?</label>
  <input type="text" name="ulubiony-kwiat" id="dana-1">
</p>
```

W naszym przykładowym kodzie HTML znajdują się dwa elementy `label`.

Każdy ze wspomnianych elementów `label` został powiązany na swój sposób z dokładnie jednym elementem HTML należącym do kategorii zawartość powiązana z elementem label .

Z naszym pierwszym przykładowym elementem `label` został powiązany element `input` posiadający atrybut `name` o wartości `imie`, ponieważ wspomniany element `input` znajduje się w zawartości wspomnianego elementu `label`.

Mimo że element `input` posiadający atrybut `name` o wartości `ulubiony-kwiat` nie znajduje się w zawartości żadnego elementu `label`, wspomniany element `input` został powiązany z naszym drugim przykładowym elementem `label`, ponieważ wspomniany element `label` posiada atrybut `for` wraz z taką samą wartością, jaką posiada atrybut `id` wspomnianego elementu `input` (czyli w tym wypadku wartością `dana-1`).

Wiążąc element HTML należący do kategorii zawartość powiązana z elementem label  z elementem `label` przeglądarka internetowa wie, że to właśnie ten, a nie inny element HTML należący do kategorii zawartość powiązana z elementem label  wraz z pozostałą zawartością występującą w zawartości wspomnianego elementu `label` tworzy etykietę interfejsu użytkownika (w naszym przykładzie pole o określonym temacie, na konkretną informację, która ma pochodzić od użytkownika).

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FXIXA4OhBF4uAiBg5Eu0T%2Fimage.png?alt=media&#x26;token=aef1783e-8c63-46d7-8d88-09cab748f06b" alt=""><figcaption></figcaption></figure>
