Formulářový element
<label>
Popisek pole. Říká, co do pole patří, a pevně ho s polem spojí.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Popisek patří k poli
Atribut for u popisku musí mít stejnou hodnotu jako id pole. Tím prohlížeč ví, že k sobě patří.
Screen reader pak při vstupu do pole přečte „E-mail“. Bez propojení by slepý uživatel nevěděl, co má vyplnit.
Proč
Kliknout jde i na popisek
Klik na propojený popisek přesune kurzor do pole. U checkboxu ho zaškrtne. Malý čtvereček se tak mění ve velkou plochu.
Vyzkoušejte v náhledu: klikněte na text vedle checkboxu.
Zápis
Popisek jako wrapper
Pole můžeme dát přímo dovnitř popisku. Pak for ani id nepotřebujeme. Hodí se to hlavně u checkboxů.
Pozor
Placeholder není popisek
Šedý text uvnitř pole (placeholder) zmizí, jakmile začnete psát. Pak už nevíte, co pole chtělo. Je navíc špatně čitelný.
Placeholder se hodí na ukázku formátu. Popisek nahradit nemůže.
Nápověda
Krátká rada pod polem
Když pole potřebuje vysvětlení, napíšeme ho pod něj a připojíme přes aria-describedby. Screen reader pak přečte popisek i radu.
Styl
Popisek nad polem
Nejčitelnější je popisek nad polem: oko jde shora dolů a nemusí přeskakovat. Nápovědu zmenšíme a ztlumíme, aby nepřekřikovala popisek.
Styl
Popisky vlevo
Na široké obrazovce můžeme popisky dát do sloupce vlevo. Formulář je pak nižší a pole tvoří úhlednou svislou linku.
Nápovědu posíláme do druhého sloupce, aby zůstala pod polem, ne pod popiskem.
Responzivita
Na telefonu zase nahoru
Na telefonu se popisek vedle pole nevejde: pole by bylo příliš úzké. Vrátíme proto jeden sloupec a popisek se přesune nad pole.
Shrnutí
Jak psát popisky
Ano
- každé pole má svůj
label foraidse stejnou hodnotou, nebo pole uvnitř popisku- nápověda připojená přes
aria-describedby - na telefonu popisek nad polem
Ne
- placeholder místo popisku
- obyčejný text vedle pole bez propojení