Strona główna >WWW >Leksykon HTML – elementy i atrybuty >label – etykieta pola

label – etykieta pola

<label for="id-pola">etykieta</label>

Etykieta pola formularza. Z polem łączy się ją atrybutem for (ta sama wartość co id pola) albo przez objęcie pola. Kliknięcie etykiety ustawia wtedy fokus w polu i przełącza pole wyboru albo przycisk opcji – obszar do dotknięcia się powiększa.

  • Domyślne wyświetlanie: display: inline
  • Znacznik zamykający: wymagany
  • Zawartość: treść frazowa, najwyżej jedno pole i bez kolejnego label
  • Gdzie może wystąpić: wszędzie, gdzie dozwolona jest treść frazowa
  • Interfejs DOM: HTMLLabelElement

Atrybuty

  • for – id pola, do którego należy etykieta.

Przykłady

Etykieta przez for i etykieta obejmująca pole:

<p><label for="tel">Telefon</label> <input type="tel" id="tel" name="tel" autocomplete="tel"></p>
<p><label><input type="checkbox" name="consent"> Akceptuję regulamin</label></p>
Wynik

Dostępność

Tekst etykiety to dostępna nazwa pola – czytnik ekranu odczyta go, gdy pole dostanie fokus. Bez etykiety użytkownik usłyszy tylko „pole edycji”. Etykieta powinna być widoczna; jeśli układ na to nie pozwala, pomoże aria-label albo wizualnie ukryty label.

Na co uważać

  • Wartość for musi dokładnie odpowiadać id pola, które musi być na stronie unikalne. Przy dwóch jednakowych formularzach na jednej stronie (w nagłówku i stopce) każdy potrzebuje własnych id.
  • Nie umieszczaj odnośników ani przycisków w etykiecie – kliknięcie w nie miesza się z kliknięciem etykiety.
  • placeholder nie jest etykietą: znika, gdy odwiedzający zaczyna pisać.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 4. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
input – pole formularza
select – lista wyboru
textarea – tekst wielowierszowy
fieldset – grupa pól
legend – podpis grupy pól
id – identyfikator (atrybut)