Formulářový element

<button>

Tlačítko. Element, kterým uživatel něco provede: odešle formulář, otevře okno, spustí akci.

V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.

Zápis

Párový tag

Text tlačítka je mezi tagy. Uvnitř může být i jiné HTML, třeba ikona. Tlačítko uvnitř formuláře ho po kliknutí odešle.

Text tlačítka má říct, co se stane. „Odeslat přihlášku“ je lepší než „OK“.

Typy

Tlačítko ve formuláři má výchozí typ submit, takže formulář odešle. Když má dělat něco jiného, musí mít type="button".

button sám nic nedělá, oživí ho JavaScript. reset smaže celý formulář, a to lidé omylem nechtějí. Používejte ho opatrně.

Pozor

Odkaz vede jinam: na jinou stránku nebo místo. Tlačítko něco provede na místě. Podle toho volte element, ne podle vzhledu.

Na div se nedá přejít klávesou Tab a screen reader neví, že jde o tlačítko. button tohle všechno umí sám.

Obsah

Šipka nebo ikona je jen ozdoba, proto ji screen readeru schováme přes aria-hidden. Tlačítko jen s ikonou potřebuje popis v aria-label.

Styl

Tlačítko si písmo nedědí, proto font: inherit. Výchozí border zrušíme a dáme mu plnou barvu, aby bylo na stránce nejvýraznější.

Styl

Při hoveru ztmavne (:hover), při stisknutí se lehce zamáčkne (:active) a při ovládání klávesnicí dostane outline (:focus-visible).

Nepoužitelné tlačítko má atribut disabled a styl button:disabled. Lepší ale bývá nechat ho aktivní a po kliknutí vysvětlit, co chybí.

Styl

Hlavní akce má být jen jedna. Ostatní tlačítka dostanou třídu a tišší vzhled: jen obrys v břidlicové barvě.

Obrys děláme přes box-shadow, ne border. Tlačítko tak má stejnou velikost jako hlavní.

Responzivita

Na telefonu dáme tlačítka pod sebe a roztáhneme je na celou šířku. Trefí se do nich palec a hlavní akce zůstane nahoře.

Ve sloupci se flex itemy samy roztáhnou na celou šířku. Nic dalšího není potřeba.

Shrnutí

Ano

Ne