Formulářový element

<select>

Výběr z možností. Dropdown, ze kterého uživatel jednu možnost vybere.

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

Zápis

Seznam možností

select obaluje jednotlivé možnosti option. Uživatel vidí text možnosti, odešle se její value.

Hodnoty v value pište krátce a bez diakritiky. Čte je server, ne člověk.

Výchozí volba

Jinak je předem vybraná první možnost a uživatel ji snadno přehlédne. Přidáme proto prázdnou výzvu. Díky required s ní formulář neprojde.

Jinou možnost předvybere atribut selected: <option value="css" selected>.

Skupiny

optgroup seskupí příbuzné možnosti pod nadpis z atributu label. Nadpis vybrat nejde, jen pomáhá v orientaci.

Atributy

Atribut multiple dovolí vybrat víc možností. Seznam se pak nerozbaluje, ale ukáže se jako okénko a vybírá se s klávesou Ctrl nebo Cmd.

To lidé často neznají. Pro výběr více možností jsou srozumitelnější checkboxy.

Našeptávač

Když chceme nabídnout možnosti, ale nechat i vlastní odpověď, propojíme input přes atribut list se seznamem datalist.

Začněte v náhledu psát do pole Město. Prohlížeč nabídne odpovídající možnosti, ale přijme i jiné město.

Styl

Výběr dostane stejný vzhled jako ostatní pole. Na širší obrazovce dáme kurz a město do jednoho řádku.

Styl

Každý prohlížeč kreslí šipku jinak. appearance: none tu jeho schová a místo ní dáme vlastní jako obrázek na pozadí.

Obrázek je malé SVG zapsané rovnou do stylu. Vpravo mu uděláme místo přes padding-right, aby se text a šipka nepřekrývaly.

Responzivita

Dva výběry vedle sebe by se na telefonu zúžily tak, že by se text možností nevešel. Řádek proto vrátíme na jeden sloupec.

Rozbalený seznam si telefon kreslí po svém, přes celou obrazovku nebo jako kolečko. Styl ho nezmění, a to je dobře: lidé ho znají.

Shrnutí

Ano

Ne