Formulářový element
<input>
Vstupní pole. Jeden element, desítky podob: text, e-mail, číslo, datum, checkbox.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Nepárový tag
input nemá uzavírací tag. Co je to za pole, určuje atribut type. Bez něj je to obyčejný text.
id propojí pole s popiskem, name je jméno, pod kterým se hodnota odešle.
Typy
Text není jen text
Pro e-mail, telefon nebo heslo existují vlastní typy. Telefon pak ukáže správnou klávesnici: u tel číslice, u email zavináč.
password skryje psané znaky za tečky.
Typy
Čísla a data
number přijme jen číslo a min a max hlídají rozsah. date otevře kalendář, takže nikdo nemusí řešit, jak datum zapsat.
Další užitečné typy: range (slider), color (výběr barvy), file (soubor), time (čas).
Typy
Jedna, nebo víc možností
radio nabízí výběr právě jedné možnosti: radio buttony se stejným name tvoří skupinu. checkbox se zaškrtává samostatně.
value je to, co se odešle. checked volbu předem zaškrtne. Skupinu radio buttonů správně obalí fieldset, ten má vlastní lekci.
Atributy
Pomocníci
required pole označí jako povinné. autocomplete řekne prohlížeči, co do pole patří, takže ho umí vyplnit sám. placeholder ukáže vzor.
Užitečné jsou i disabled (pole nejde použít a neodešle se) a readonly (jde jen číst, ale odešle se).
Styl
Klidná pole
Textová pole dostanou vzduch a jemný border. Písmo jim předáme přes font: inherit, jinak by měla menší a jiné. Číslo a datum dáme do jednoho řádku.
Styl
Stavy pole
Pole, do kterého se píše, musí být jasně vidět (:focus-visible). Špatně vyplněné pole zčervená (:user-invalid). accent-color obarví checkboxy a radio buttony.
:user-invalid se ozve až poté, co uživatel pole opustí. Zkuste do e-mailu napsat jen „jana“ a klikněte jinam.
Responzivita
Pole pro palec
Na telefonu dáme číslo a datum pod sebe a zvětšíme plochu u radio buttonů, aby se do nich dalo trefit prstem.
Písmo v poli nechte aspoň 16 px. S menším iPhone při psaní stránku sám přiblíží.
Shrnutí
Jak používat input
Ano
- typ podle obsahu:
email,tel,number,date… autocomplete, aby prohlížeč pomohl s vyplněním- viditelný stav
:focus-visible - na telefonu písmo aspoň 16 px a velké plochy pro prst
Ne
type="text"úplně na všechno- radio buttony bez společného
name