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.

Przykład:

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