Formulářový element
<form>
Formulář. Wrapper, který sesbírá, co uživatel vyplnil, a pošle to dál.
V náhledu vidíte, kam se dostaneme. Skrolujte dolů a postavíme to krok za krokem.
Zápis
Wrapper pro pole
Formulář je párový tag. Uvnitř jsou pole k vyplnění, jejich popisky a tlačítko, které formulář odešle.
Jednotlivým polím se věnují další lekce. Tady nás zajímá wrapper, který je drží pohromadě.
Atributy
Kam a jak odeslat
action říká, na jakou adresu se data pošlou. method říká jak: get je přidá do adresy, post je pošle skrytě.
Bez action se formulář pošle na tutéž stránku, bez method se použije get.
Atributy
Každé pole má jméno
Odeslat se dá jen pole s atributem name. Ze jména a vyplněné hodnoty vznikne dvojice, kterou dostane server.
Server pak dostane třeba jmeno=Jana&prijmeni=Nová&email=jana@example.cz.
Kontrola
Prohlížeč hlídá za nás
Pole s required musí být vyplněné a type="email" musí obsahovat e-mail. Jinak prohlížeč formulář neodešle a ukáže, co je špatně.
Zkuste v náhledu kliknout na tlačítko s prázdnými poli. Server ale musí data zkontrolovat i sám: kontrolu v prohlížeči jde obejít.
Styl
Pole pod sebou
Každý popisek s polem zabalíme do div. Grid (grid) je pak srovná pod sebe a gap mezi nimi nechá prostor.
Styl
Pole a tlačítko
Pole a tlačítka si písmo nedědí, proto jim ho předáme přes font: inherit. Pak už jen vzduch, border a barva.
justify-self: start zabrání tomu, aby se tlačítko v gridu roztáhlo na celou šířku.
Styl
Co patří k sobě, je vedle sebe
Jméno a příjmení vyplňujeme za sebou. Na širší obrazovce je dáme do jednoho řádku se dvěma sloupci.
Responzivita
Na telefonu jeden sloupec
Na úzké obrazovce by vedle sebe byla dvě příliš úzká pole. Řádek proto vrátíme na jeden sloupec a tlačítko roztáhneme, aby se do něj snadno trefil palec.
Shrnutí
Jak stavět formulář
Ano
actionamethodpodle toho, co se posílánameu každého pole, které se má odeslatrequireda správnýtypepro kontrolu- na telefonu pole v jednom sloupci
Ne
- hesla a osobní údaje přes
method="get" - spoléhat jen na kontrolu v prohlížeči