Dokumentacja HTML z przykładami: Label w HTML

Q: Czym jest atrybut for w elemencie label?

for zawiera id pola, do którego należy etykieta: Email . Musi dokładnie odpowiadać id, a nie name.

Q: Jak ukryć label, ale zostawić go dla czytników ekranu?

Zostaw i ukryj go wizualnie klasą, która zmniejsza go do 1 piksela i przycina, zamiast display: none, które ukrywa go także przed czytnikami ekranu. Gdy przy polu nie ma miejsca na żadną etykietę, alternatywą jest aria-label na samym polu.

Co robi element label

<label> nadaje polu formularza nazwę. Połącz go przez for z wartością id pola, a zyskasz dwie rzeczy: czytniki ekranu odczytają etykietę, gdy pole dostanie fokus, a kliknięcie tekstu etykiety przeniesie fokus na pole. Kliknij oba teksty poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Kliknięcie "City" ustawia kursor w polu. Kliknięcie "Country" nic nie robi, a czytnik ekranu na drugim polu powie tylko "edit text", bez żadnej nazwy. Oba wyglądają tak samo; tylko jedno ma etykietę.

Dwa sposoby połączenia etykiety

Użyj for i id albo umieść pole wewnątrz etykiety:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` i `id`	Objęcie pola
Wymaga `id`	Tak, unikalnego na stronie	Nie
Etykieta i pole mogą być osobno	Tak (komórka tabeli, siatka)	Nie, pole jest w środku
Łatwo zepsuć	Literówką albo zduplikowanym `id`	Wstawiając dwa pola do jednej etykiety

for musi odpowiadać id pola, a nie jego name. Często to to samo słowo, co ukrywa błąd, dopóki ktoś nie zmieni jednego z nich. Połączenie obu sposobów (objęcie i for) jest w porządku i spotykane często.

Etykietę można połączyć z <input> (poza type="hidden"), <select>, <textarea>, <button>, <meter>, <output> i <progress>. Jedna etykieta nazywa jedno pole. Pole może mieć więcej niż jedną etykietę, choć jedna jasna etykieta jest prostsza dla wszystkich.

Większy obszar kliknięcia dla checkboxów i radio

Przy małych kontrolkach etykieta ma największe znaczenie: kliknięcie w dowolnym jej miejscu przełącza pole, więc celem jest cała linia tekstu, a nie kwadrat 13 na 13 pikseli. Ostylowana etykieta może dać jeszcze większy obszar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Kliknij w padding każdego wiersza, z dala od pola. Pierwszy wiersz się przełącza; drugi nie reaguje, chyba że trafisz w samo pole. Więcej o checkboxach w checkbox w HTML.

Podpowiedzi i komunikaty o błędach

Etykieta powinna być krótka: to nazwa pola. Dodatkowe instrukcje i komunikaty o błędach trafiają do osobnych elementów połączonych przez aria-describedby, dzięki czemu czytniki ekranu czytają najpierw etykietę, a po niej opis:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Naciśnij Create przy pustym polu, potem z AB, potem z ada99. Dzięki aria-describedby czytnik ekranu powie coś w rodzaju "Username, required, edit text, 3 to 16 lowercase letters or digits, Enter a username." Gwiazdka ma aria-hidden, bo atrybut required już mówi "required"; usłyszenie "star" niczego nie wnosi.

Ukryte etykiety

Niektóre pola mają inną widoczną wskazówkę niż tekstowa etykieta, na przykład pole wyszukiwania obok przycisku Search. Etykieta i tak jest potrzebna; ukryj ją wizualnie, ale zostaw na stronie dla czytników ekranu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Nie ukrywaj jej przez display: none ani visibility: hidden: to ukrywa ją także przed czytnikami ekranu, a nie każda przeglądarka i czytnik ekranu wciąż używa ukrytej etykiety jako nazwy. Drugą opcją jest aria-label="Search courses" na polu input, które nadaje nazwę bez żadnego elementu label. Widoczna etykieta to nadal najlepszy wybór wszędzie, gdzie jest na nią miejsce: każdy zyskuje, widząc, do czego służy pole.

Częste błędy

for wskazujące na name zamiast na id. Nic się nie łączy.
Zduplikowane id. for łączy się z pierwszym elementem o tym id, a może to być pole w innym formularzu na stronie.
Placeholder zamiast etykiety. Znika podczas pisania i nie jest pewną nazwą.
Dwa pola w jednej etykiecie. Etykieta nazywa jedno pole; drugie zostaje bez etykiety.
Link wewnątrz etykiety checkboxa, na przykład "Akceptuję regulamin" ze słowem "regulamin" jako linkiem. Część linii przełącza pole, a część otwiera stronę, więc łatwo trafić przez pomyłkę. Umieść link poza etykietą.
Ukrywanie etykiety przez display: none. Użyj klasy ukrywającej wizualnie.
Tekst obok pola, który nie jest <label>. Wygląda tak samo i nic nie robi. O formularzu wokół pól przeczytasz w formularze HTML.

Najczęściej zadawane pytania

Co robi znacznik label w HTML?

Nadaje nazwę polu formularza. Czytniki ekranu odczytują etykietę, gdy pole dostaje fokus, a kliknięcie etykiety przenosi fokus na pole albo przełącza je, jeśli to checkbox lub przycisk radio.

Czym jest atrybut for w elemencie label?

for zawiera id pola, do którego należy etykieta: <label for="email">Email</label> <input id="email">. Musi dokładnie odpowiadać id, a nie name.

Umieścić input w środku label czy użyć for?

Oba sposoby działają w obecnych przeglądarkach i czytnikach ekranu. Objęcie pola nie wymaga id; for i id pozwalają umieścić etykietę i pole w różnych miejscach kodu, na przykład w osobnych komórkach tabeli. Wiele zespołów obejmuje pole i dodatkowo dodaje for.

Czy placeholder może zastąpić label?

Nie. Placeholder znika, gdy tylko zaczniesz pisać, często ma słaby kontrast i nie zawsze jest odczytywany jako nazwa pola. Użyj widocznego <label>, a placeholder zostaw co najwyżej na przykładową wartość.

Jak ukryć label, ale zostawić go dla czytników ekranu?

Zostaw <label> i ukryj go wizualnie klasą, która zmniejsza go do 1 piksela i przycina, zamiast display: none, które ukrywa go także przed czytnikami ekranu. Gdy przy polu nie ma miejsca na żadną etykietę, alternatywą jest aria-label na samym polu.

Powiązane zagadnienia