Tagi HTML: fieldset

Element <fieldset> służy do tematycznego grupowania powiązanych pól formularza i automatycznie rysuje wokół nich ramkę. Jest to semantyczny element HTML, który porządkuje strukturę formularza, dzięki czemu poprawia czytelność i dostępność dla użytkowników.

<fieldset> reprezentuje zbiór elementów formularza, które logicznie do siebie przynależą i powinny być traktowane jako jedna grupa. Najczęściej stosuje się go wewnątrz elementu <form>.

Podstawowa struktura i składnia

<fieldset> wymaga zarówno znacznika otwierającego, jak i zamykającego. To element blokowy (display: block), który domyślnie zajmuje całą szerokość i zaczyna się w nowym wierszu. Przykładowa, minimalna składnia wygląda tak:

<form action="skrypt.php" method="get"> <fieldset> <legend>Dane do logowania:</legend>


    <label for="login">Login:</label>

    <input type="text" id="login" name="login">
    <label for="haslo">Hasło:</label>

    <input type="password" id="haslo" name="haslo">

  </fieldset>

<button type="submit">Zaloguj się</button> </form>

Element `<legend>` – podpis grupy

<legend> definiuje podpis dla <fieldset> i powinien być jego pierwszym dzieckiem. Dostarcza krótkiej, opisowej etykiety dla całej grupy pól. Przykład użycia:

<fieldset> <legend>Twoje dane osobowe</legend>

<label>Imię: <input type="text" name="imie"></label> <label>Nazwisko: <input type="text" name="nazwisko"></label> </fieldset>

Bez <legend> <fieldset> nadal narysuje ramkę, ale grupa nie będzie miała opisowej etykiety, co negatywnie wpływa na dostępność.

Domyślne style CSS

Przeglądarki stosują do <fieldset> domyślne style. Poniżej przykładowy (uproszczony) zestaw:

fieldset { display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-right: 0.75em; padding-bottom: 0.625em; padding-left: 0.75em; border-width: 2px; border-style: groove; border-color: black; }

Domyślna ramka ma styl groove, co nadaje jej delikatny, trójwymiarowy efekt. Możesz w pełni dostosować te style do potrzeb projektu.

Praktyczne przykłady użycia

Przykład 1 – formularz z wieloma grupami pól

Tak możesz czytelnie podzielić formularz na sekcje:

<form action="https://example.com/submit" method="post"> <fieldset> <legend>Dane logowania</legend>


    <label for="email">Email:</label>

    <input type="email" id="email" name="email" required>
    <label for="password">Hasło:</label>

    <input type="password" id="password" name="password" required>

  </fieldset>
  <fieldset>

    <legend>Dane adresowe</legend>
    <label for="street">Ulica:</label>

    <input type="text" id="street" name="street">
    <label for="city">Miasto:</label>

    <input type="text" id="city" name="city">
    <label for="zip">Kod pocztowy:</label>

    <input type="text" id="zip" name="zip">

  </fieldset>

<button type="submit">Wyślij formularz</button> </form>

Przykład 2 – formularz z wyłączonymi polami

Atrybut disabled na <fieldset> wyłącza wszystkie elementy formularza wewnątrz tej grupy. Kod przykładowy:

<form> <fieldset disabled> <legend>Formularz niedostępny</legend>


    <label for="field1">Pole 1:</label>

    <input type="text" id="field1">

<label for="field2">Pole 2:</label> <input type="text" id="field2"> </fieldset> </form>

Wszystkie pola w tej grupie będą nieaktywne i niedostępne dla użytkownika.

Przykład 3 – wykorzystanie atrybutu `name`

Atrybut name przypisuje nazwę grupie pól, co może być wykorzystywane przez przeglądarkę i narzędzia deweloperskie. Przykład:

<form action="submit.php"> <fieldset name="strefa-komentarza"> <legend>Miejsce na komentarz</legend> <textarea name="komentarz" rows="5" cols="40"></textarea> </fieldset>

<button type="submit">Wyślij komentarz</button> </form>

Przykład 4 – atrybut `form` dla `<fieldset>` poza formularzem

Atrybut form pozwala powiązać <fieldset> z formularzem, który nie jest jego przodkiem. Oto jak to zrobić:

<form id="formularz-1" action="submit.php"> <fieldset> <legend>Dane użytkownika</legend> <label for="name">Imię:</label> <input type="text" id="name" name="name"> </fieldset> <button type="submit">Wyślij</button> </form>

<fieldset form="formularz-1"> <legend>Dodatkowy komentarz</legend> <textarea name="komentarz"></textarea> </fieldset>

W tym przykładzie drugi <fieldset> jest powiązany z formularzem o id="formularz-1" dzięki atrybutowi form.

Dostępne atrybuty

Atrybuty specyficzne dla `<fieldset>`

Najważniejsze atrybuty specyficzne to:

name – przypisuje nazwę grupy pól;
form – określa powiązanie z elementem <form> za pomocą wartości atrybutu id tego formularza;
disabled – wyłącza wszystkie elementy wewnątrz grupy.

Atrybuty globalne

Element <fieldset> obsługuje wszystkie globalne atrybuty HTML, m.in.:

id – unikatowy identyfikator,
class – klasa CSS,
title – tooltip (tekst wyświetlany po najechaniu myszką),
style – style inline CSS,
dir – kierunek tekstu (ltr/rtl),
lang – język zawartości.

Atrybuty zdarzeń

Element wspiera atrybuty zdarzeń myszki i klawiatury:

onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmouseout,
onkeypress, onkeydown, onkeyup.

Domyślny kontekst użycia

Gdzie można umieszczać `<fieldset>`?

Element <fieldset> może być zawarty wewnątrz elementów treści ogólnej, takich jak:

form – formularz,
div – sekcja dokumentu,
blockquote – cytat blokowy,
body – główna zawartość dokumentu,
td, th – komórki tabeli,
li – elementy listy.

Domyślnie <fieldset> wiąże się z najbliższym przodkiem <form>, jeśli taki istnieje.

Co może zawierać `<fieldset>`?

<fieldset> może zawierać szeroki zakres treści, w tym:

elementy formularza: input, select, textarea, button, label,
elementy tekstu: p, h1–h6, span,
elementy semantyczne: strong, em, code, kbd,
elementy multimediów: img, map,
inne elementy: ul, ol, table, div.

Praktyczne wskazówki CSS

Dostosowanie stylu ramki

Poniżej przykład prostej, nowoczesnej stylizacji grupy i podpisu:

fieldset { border: 2px solid #3498db; border-radius: 8px; padding: 20px; margin-bottom: 20px; background-color: #f8f9fa; }

fieldset legend { padding: 0 10px; color: #2c3e50; font-weight: bold; font-size: 16px; }

Stylizacja `<fieldset>` ze zmiennymi CSS

Jeśli w projekcie korzystasz ze zmiennych, możesz spiąć wygląd z design systemem:

fieldset { border: 2px solid var(--primary-color); border-radius: var(--border-radius); padding: var(--spacing); background-color: var(--background-light); }

Responsywny formularz z wieloma grupami

Tak zorganizujesz responsywny układ z odstępami między grupami:

form { display: grid; gap: 20px; }


fieldset {

  border: 1px solid #ddd;

  border-radius: 4px;

  padding: 15px;

}

@media (max-width: 768px) { fieldset { padding: 10px; margin-bottom: 10px; } }

Semantyczne znaczenie i dostępność

<fieldset> ma kluczowe znaczenie dla dostępności. Technologie asystujące (np. czytniki ekranu) rozpoznają grupowanie pól, dzięki czemu użytkownicy szybciej rozumieją strukturę formularza. Prawidłowe użycie <fieldset> w połączeniu z <legend> znacząco poprawia doświadczenie osób z niepełnosprawnościami.