Powiązanie elementu HTML z elementem "label"

Tworząc formularz HTML w zawartości naszego formularza HTML możemy umieszczać różne elementy HTML, za pomocą których między innymi możemy pobrać interesującą nas informację od użytkownika.

Przykład:

<form>
  Jakie jest Twoje imię? <input type="text" name="imie">
  Jaki jest Twój kolor włosów? <input type="text" name="kolor-wlosow">
  Jaki jest Twój ulubiony kwiat? <input type="text" name="ulubiony-kwiat">
  Jaki jest Twój ulubiony kolor? <input type="text" name="ulubiony-kolor">
</form>

Każdy z elementów input występujący w naszym przykładowym kodzie HTML może zostać powiązany z elementem label.

Jednym ze sposobów powiązania elementu input z elementem label jest umieszczenie interesującego nas elementu input w zawartości interesującego nas elementu label.

Przykład:

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

  <label>
    Jaki jest Twój kolor włosów? <input type="text" name="kolor-wlosow">
  </label>

  <label>
    Jaki jest Twój ulubiony kwiat? <input type="text" name="ulubiony-kwiat">
  </label>

  <label>
    Jaki jest Twój ulubiony kolor? <input type="text" name="ulubiony-kolor">
  </label>
</form>

Umieszczając element input w zawartości elementu label przeglądarka internetowa wie, że to właśnie ten, a nie inny element input występujący w zawartości danego elementu 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).

Jeżeli z jakiejś przyczyny interesujący nas element input musi znaleźć się poza zawartością elementu label, z którym to elementem label chcemy powiązać interesujący nas element input, wtedy do wspomnianego elementu label należy dodać atrybut for wraz z wartością, jaką posiada atrybut id wspomnianego elementu input.

Przykład:

<label for="dana-1">Jakie jest Twoje imię?</label>

<input type="text" name="imie" id="dana-1">