Grupowanie pól za pomocą fieldset i legend
Prawidłowo grupuj powiązane elementy sterujące, takie jak zestawy przycisków radiowych
Grupowanie pól za pomocą fieldset i legend to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Niektóre pola tworzą grupę
Zestaw przycisków opcji lub powiązanych pól wyboru to jedno pytanie, a nie wiele pytań. Element fieldset grupuje je w całość. 🧩
Grupa potrzebuje nazwy
Każdy element sterujący ma własną etykietę, ale cała grupa również jej potrzebuje. Element legend nadaje zestawowi wspólne pytanie.
legend jest pierwszy
Element legend musi być pierwszym elementem potomnym fieldset. Pełni funkcję podpisu, który czytniki ekranu wiążą ze wszystkimi elementami sterującymi wewnątrz.
<fieldset>
<legend>Shipping speed</legend>
</fieldset>Kompletna grupa przycisków opcji
W tym przykładzie fieldset obejmuje opcje, a legend zadaje pytanie. Każdy przycisk opcji nadal ma własną etykietę.
<fieldset>
<legend>Size</legend>
<label><input type="radio" name="s"> Small</label>
<label><input type="radio" name="s"> Large</label>
</fieldset>Co słyszą użytkownicy czytników ekranu
Po przejściu do pogrupowanego przycisku opcji czytnik ekranu odczytuje legend oraz opcję, na przykład „Rozmiar, mały”. Kontekst jest dostępny automatycznie.
Przyciski opcji to klasyczny przypadek
Przyciski opcji o tej samej nazwie to podręcznikowy przykład użycia. Bez fieldset użytkownicy słyszą opcje, ale nie wiedzą, czego dotyczą.
Dotyczy to także zestawów pól wyboru
Lista wielokrotnego wyboru, taka jak „Wybierz zainteresowania”, również jest grupą. Fieldset wiąże pola wyboru z jednym wspólnym poleceniem.
Podzielone pojedyncze dane wejściowe
Korzyści dotyczą także pól adresu rozdzielonych na wiele elementów. Legend, na przykład „Adres rozliczeniowy”, nadaje kontekst całej sekcji.
Nie używaj nadmiernie
Pojedyncze pole tekstowe nie potrzebuje fieldset. Grupowanie należy stosować tylko w przypadku pól, które rzeczywiście wspólnie odpowiadają na jedno pytanie.
Stylowanie jest elastyczne
Domyślna obwódka wygląda przestarzale, ale można ją dowolnie zmienić za pomocą CSS. Semantyka pozostaje niezmieniona niezależnie od wyglądu.
ARIA to ostateczność
Jeśli użycie prawdziwego fieldset jest niemożliwe, rola group wraz z aria-labelledby może go naśladować. Zawsze, gdy to możliwe, należy preferować element natywny.
Szybki test
Jaki element nadaje nazwę fieldset na potrzeby technologii asystujących?
Podsumowanie
Powiązane elementy sterujące należy umieszczać w fieldset i opatrywać legendą. Zestawy przycisków opcji i pól wyboru zyskują kontekst, na którym może polegać każdy użytkownik. ✅
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Grupowanie pól za pomocą fieldset i legend” jest bezpłatna?
Tak — pełny tekst „Grupowanie pól za pomocą fieldset i legend” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Grupowanie pól za pomocą fieldset i legend”?
Prawidłowo grupuj powiązane elementy sterujące, takie jak zestawy przycisków radiowych Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Grupowanie pól za pomocą fieldset i legend”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Każde pole wejściowe potrzebuje prawdziwego label
- Placeholder to nie etykieta
- Grupowanie pól za pomocą fieldset i legend
- Ogłaszanie tekstu pomocy i wymaganych pól