Tagi HTML: legend

Tag <legend> służy do tworzenia podpisu (etykiety lub nagłówka) dla elementu <fieldset>, który grupuje powiązane pola formularza. Musi być pierwszym potomkiem wewnątrz <fieldset>, co zapewnia poprawną semantykę i ułatwia nawigację po formularzu.

To kluczowy element dostępności – czytniki ekranu odczytują legendę jako tytuł grupy, dzięki czemu użytkownicy niewidomi rozumieją kontekst pól.

Czym jest tag `<legend>` i do czego służy?

Element <legend> reprezentuje podpis elementu <fieldset>, który wizualnie i semantycznie grupuje powiązane kontrolki formularza, takie jak pola tekstowe, checkboxy czy przyciski wyboru (radio). <fieldset> rysuje obramowanie wokół grupy, a <legend> opisuje jej cel, np. „Dane osobowe” lub „Opcje dostawy”.

Bez <legend> grupa pól w <fieldset> traci część semantyki, co obniża jakość i dostępność formularza. W HTML5 legenda nie jest wymagana, ale jest silnie zalecana i obsługiwana przez wszystkie współczesne przeglądarki.

Najważniejsze właściwości stosowania <legend> są następujące:

znacznik otwierający i zamykający – są wymagane dla poprawnej semantyki;
położenie w dokumencie – może znajdować się tylko wewnątrz <fieldset>;
pierwszy element potomny – musi występować jako pierwszy element wewnątrz <fieldset>.

Podstawowa składnia i przykład użycia

Oto prosty przykład formularza logowania z <fieldset> i <legend>:

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Przykład fieldset i legend</title> </head> <body> <form action="login.php" method="post"> <fieldset> <legend>Dane do logowania</legend> <p> <label for="login">Login:</label> <input type="text" id="login" name="login" required> </p> <p> <label for="haslo">Hasło:</label> <input type="password" id="haslo" name="haslo" required> </p> <button type="submit">Zaloguj</button> </fieldset> </form> </body> </html>

Efekt: ramka z podpisem „Dane do logowania” otacza pola, a legenda pojawia się u góry grupy.

Atrybuty elementu `<legend>`

<legend> obsługuje globalne atrybuty HTML oraz zdarzenia. Najczęściej używane globalne atrybuty to:

id=”nazwa” – unikalny identyfikator elementu w obrębie całego dokumentu;
class=”nazwa” – nazwa klasy do stylizacji w CSS;
style=”…” – styl w linii, np. style="font-weight: bold;";
title=”tekst” – tekst podpowiedzi (tooltip) widoczny po najechaniu myszką;
dir=”ltr|rtl” – kierunek zapisu tekstu (ltr – od lewej do prawej, rtl – od prawej do lewej);
lang=”język” – język treści, np. lang="pl".

Atrybuty zdarzeń (JavaScript) – typowe to: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup; służą do obsługi interakcji myszą i klawiaturą.

Uwaga (HTML5): atrybut align został usunięty i należy go zastąpić stylami CSS.

Przykład z wykorzystaniem kilku atrybutów prezentuje poniższy kod:

<fieldset> <legend id="dane-osobowe" class="naglowek-formularza" style="color: blue; font-size: 1.2em;" title="Wypełnij dane osobowe" lang="pl" onclick="alert('Kliknięto legendę!')"> Dane osobowe </legend>  </fieldset>

Zaawansowane przykłady zastosowań

1. Grupowanie opcji w formularzu ankiety

Poniżej przykład ankiety z grupami pól i podpisami, w tym ze skrótem opisanym za pomocą <abbr>:

<form> <fieldset> <legend>Preferencje kolorystyczne</legend> <label><input type="radio" name="kolor" value="niebieski"> Niebieski</label><br> <label><input type="radio" name="kolor" value="czerwony"> Czerwony</label><br> <label><input type="radio" name="kolor" value="zielony"> Zielony</label> </fieldset>

<fieldset> <legend><abbr title="Informacje dodatkowe">Info</abbr></legend> <label><input type="checkbox" name="newsletter"> Subskrybuj newsletter</label> </fieldset> </form>

Użycie <abbr> w legendzie pomaga zrozumieć skrót dzięki atrybutowi title.

2. Stylizacja z CSS

Skorzystaj z poniższych reguł CSS, aby uzyskać nowoczesny wygląd <fieldset> i <legend>:

fieldset { border: 2px solid #007bff; border-radius: 8px; padding: 20px; margin: 10px 0; } legend { background: #007bff; color: white; padding: 5px 15px; border-radius: 4px; font-weight: bold; } .naglowek-formularza { text-align: center; }

Efekt: otrzymujesz zaokrągloną ramkę z wyraźnie wyróżnioną, kontrastową legendą.

3. Responsywny formularz z wieloma grupami

W pełnym formularzu zamówieniowym możesz rozdzielić dane na logiczne sekcje i nadać im czytelne nagłówki:

<form class="zamowienie"> <fieldset> <legend>Dane klienta</legend> <input type="text" placeholder="Imię" required> <input type="email" placeholder="E-mail" required> </fieldset>


  <fieldset>

    <legend>Adres dostawy</legend>

    <input type="text" placeholder="Ulica">

    <input type="text" placeholder="Kod pocztowy">

  </fieldset>
  <fieldset>

    <legend>Płatność</legend>

    <label><input type="radio" name="platnosc" value="karta"> Karta</label>

    <label><input type="radio" name="platnosc" value="przelew"> Przelew</label>

  </fieldset>

<button type="submit">Zamów</button> </form>

Dla urządzeń mobilnych zastosuj media query, np.: @media (max-width: 600px) { legend { font-size: 1em; } }

Najlepsze praktyki i dostępność

Stosuj poniższe wskazówki, aby utrzymać wysoką jakość i dostępność formularzy:

umieszczaj <legend> jako pierwszy element – zapewnia właściwą kolejność odczytu i ogłoszenie tytułu grupy przez technologie asystujące;
używaj razem z <label> – łącz etykiety z polami atrybutami for/id dla pełnej dostępności (bez potrzeby ARIA);
stawiaj na semantykę – nawet bez stylów CSS struktura z <fieldset> i <legend> pozostaje czytelna;
unikaj pustych legend – zawsze dodawaj zwięzły, opisowy tytuł grupy;
testuj dostępność – użyj Lighthouse lub WAVE, aby sprawdzić zgodność z WCAG i wykryć problemy;
integruj z JavaScript – dodaj obsługę zdarzeń do sterowania grupami, np. document.querySelector('legend').addEventListener('click', toggleGroup);.

Częste błędy i pułapki

Poniższa tabela pokazuje typowe problemy oraz sugerowane poprawki:

Błąd	Opis	Poprawka
`<legend>` poza `<fieldset>`	Nieprawidłowa semantyka	Przenieś do `<fieldset>` jako pierwszy potomek
Brak legendy	Grupa bez tytułu	Dodaj `<legend>Tytuł</legend>`
Użycie `align`	Przestarzałe w HTML5	Zastąp regułą CSS, np. `text-align: center;`
Powtarzalne `id`	Błąd walidacji	Zapewnij unikalność identyfikatorów

Czym jest tag <legend> i do czego służy?