<fieldset>

Grupa powiązanych pól formularza z ramką i podpisem `<legend>`.

Wyświetlanie: block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Opcjonalny <legend> jako pierwszy element, potem treść przepływu

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<form>
  <fieldset>
    <legend>Poziom zaawansowania</legend>
    <div><label><input type="radio" name="level" value="beginner" checked> Zaczynam od zera</label></div>
    <div><label><input type="radio" name="level" value="basics"> Znam podstawy HTML</label></div>
    <div><label><input type="radio" name="level" value="advanced"> Piszę już w JavaScripcie</label></div>
  </fieldset>
</form>

Podgląd

Definicja i zastosowanie

Element <fieldset> łączy kilka powiązanych pól w jedną grupę, na przykład „Dane kontaktowe” albo „Adres dostawy”. Przeglądarka domyślnie rysuje wokół grupy ramkę, a pierwszy element <legend> wyświetla na jej górnej krawędzi jako podpis.

Grupa ma duże znaczenie dla dostępności przy przyciskach radiowych i polach wyboru. Pytanie „Poziom zaawansowania” zapisane w <legend> czytnik ekranu ogłosi przy wejściu do grupy, więc odpowiedzi „Początkujący” i „Zaawansowany” nie zawisną w próżni.

Atrybut disabled na <fieldset> wyłącza naraz wszystkie pola w grupie (z wyjątkiem tych w jej pierwszym <legend>). To wygodny sposób na zablokowanie części formularza, dopóki użytkownik nie zaznaczy wymaganej opcji.

Składnia

<fieldset>
  <legend>Nazwa grupy</legend>
  …
</fieldset>

Atrybuty

disabled
atrybut logiczny
Wyłącza wszystkie pola w grupie jednocześnie. Ich wartości nie zostaną wysłane.
name
tekst
Nazwa grupy, przydatna w JavaScripcie, na przykład form.elements.nazwa. Sam <fieldset> nie wysyła żadnej wartości.

Atrybut	Wartości	Opis
disabled	atrybut logiczny	Wyłącza wszystkie pola w grupie jednocześnie. Ich wartości nie zostaną wysłane.
name	tekst	Nazwa grupy, przydatna w JavaScripcie, na przykład `form.elements.nazwa`. Sam `<fieldset>` nie wysyła żadnej wartości.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

disabled

atrybut logiczny

Wyłącza wszystkie pola w grupie jednocześnie. Ich wartości nie zostaną wysłane.

HTML

<fieldset disabled>
  <legend>Dane do faktury</legend>
  <p><label>NIP <input type="text" name="nip"></label></p>
  <p><label>Nazwa firmy <input type="text" name="company"></label></p>
</fieldset>

Podgląd

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

fieldset {
  display: block;
  margin-inline: 2px;
  border: 2px groove ThreeDFace;
  padding-block: 0.35em 0.625em;
  padding-inline: 0.75em;
  min-inline-size: min-content;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Domyślne min-inline-size: min-content sprawia, że <fieldset> nie chce się zwężać, na przykład w siatce na telefonie. Pomaga min-inline-size: 0.
Ramkę usuniesz przez border: 0, ale samą grupę i <legend> zostaw. Semantyka działa niezależnie od wyglądu.
Nie opakowuj w <fieldset> pojedynczego pola. Grupa ma sens dla kilku powiązanych pól.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs