Formulářový element
<fieldset>
Skupina polí. Spojí pole, která patří k jedné otázce, a dá jim společný nadpis.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Skupina a její nadpis
fieldset obalí skupinu polí. Hned první prvek uvnitř je legend: otázka, na kterou pole odpovídají.
Screen reader pak u radio buttonu přečte „Forma kurzu, Online“. Bez legend by uživatel slyšel jen „Online“ a nevěděl by, na co odpovídá.
Kdy
Kde se skupina hodí
Vždy u radio buttonů a u několika checkboxů k jedné otázce. A taky u dlouhého formuláře, který dělíme na oddíly, třeba „Osobní údaje“ a „Platba“.
Atributy
Vypnout celou skupinu
Atribut disabled na fieldset vypne všechna pole uvnitř najednou. Nemusíme ho psát ke každému zvlášť.
Vypnutá pole se neodešlou. Hodí se to třeba pro oddíl, který dává smysl, až když uživatel něco zaškrtne.
Styl
Bez borderu
Prohlížeč kreslí kolem skupiny border s nadpisem v něm. Zenovější je border zrušit a nechat skupinu oddělit jen prostorem.
Styl
Radio buttony jako dlaždice
Každou možnost dáme do dlaždice s krátkým popisem. Vybraná dlaždice se orámuje: selektor :has(:checked) znamená „dlaždice, která obsahuje zaškrtnutý radio button“.
Celá dlaždice je label, takže se dá kliknout kamkoli do ní.
Styl
Dlaždice vedle sebe
Na širší obrazovce dáme tři dlaždice do jednoho řádku. Všechny možnosti jsou tak vidět najednou a dají se snadno porovnat.
Responzivita
Na telefonu pod sebou
Tři dlaždice vedle sebe by na telefonu byly úzké proužky se zalomeným textem. Vrátíme je proto pod sebe, kde mají celou šířku.
Velká dlaždice je pro prst mnohem lepší cíl než malý kroužek radio buttonu.
Shrnutí
Jak seskupovat pole
Ano
fieldsetalegendu každé skupiny radio buttonůlegendjako první prvek uvnitř- celá dlaždice jako
label, ať se dá kliknout kamkoli - na telefonu dlaždice pod sebou
Ne
- skupina radio buttonů s nadpisem jen v obyčejném odstavci
fieldsetkolem jediného pole