Opakování

Formuláře

Formulář

• (pro účely WBA)
• webový prvek určený k odesílání dat ze stránky pryč
• cílem je většinou nějaký chytrý server, který požadavky zpracuje
• např. kontaktní formuláře, objednávky, přihlášení, ...

Naše cíle s formuláři

• naším cílem bude vytvářet především hezké formuláře
• formuláře musí uživatel být schopen využívat
• pokročilejší práci (např. validaci) se naučíte např. v MVOPu Webového frontendu nebo v DVOPu Webového backendu

Formulář — form

• označuje místo, kde se budou nacházet prvky formulářů
• atributy:
• action — definuje cestu, kam se data odešlou
• method — definuje způsob (get/post), kterým se odešlou data
• odesílají se jen prvky, které jsou uvnitř

Prvek formuláře

• místo ve formulář, kam uživatel může zadávat informace
• např. z C# Forms / WPF: textbox, selectbox, radio, ...
• my si ukážeme malou podmnožinu z nich, které se nám budou hodit
• různé prvky mají různé validace dat (pouze klientem)
• většina prvků používá tag input (a atribut type)
• prvky se stylují dle prohlížeče

Textový vstup
type="text"

Textový vstup
type="text"

• používáme např. na jména ale můžeme i na nějaké číselné vstupy
• nemá žadnou validaci
• vše je na jediném řádku

input — placeholder

input — value

Tlačítko type="button"

• vlastní akce určené ve formuláři
• atribut value — jméno, které se vykreslí

Odesílač type="submit"

• odeslání formuláře dle nastavení tagu form
• atribut value — jméno, které se vykreslí

E-mail type="email"

• textové pole, validuje při odeslání zda je validní e-mail

Heslo type="password"

• místo znaků ze zobrazí zástupné symboly

Datum type="date"

• výběr data, umožnuje různou validaci
• datetime, datetime-local

Soubor type="file"

• vybrání souborů, které se odešlou

Zaškrtávací políčko type="checkbox"

Radio type="radio"

• name určuje unikátní jméno — a jeho hodnotu

Dlouhý text — textarea

• více řádků

Popisky

• správný formulář používá různé popisky k určení prvků
• tag label
• některé prvky jej potřebují k používání (např. checkbox, radio, ...)
• každý popisek může být určen nějakému prvku pomocí identifikátoru

Popisky

input — další typy

• color
• month
• number
• range
• reset
• search
• tel
• url
• week
• hidden

Stylování formulářů

Stylování formulářů

• stejně jako normální stránky
• label — inline
• input — block
• textarea — block
• rozložení pomocí flexboxu či gridu

Vlastnost resize

• jak bude moci uživatel měnit velikost prvku
• nutné nastavit overflow

Vlastnost backdrop-filter

• vlastnost filter ale na pozadí

Velký formulář

Práce

Design formuláře

Práce