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

Výběr z možností — select

Výběr

Práce

Způsoby předávání dat

• data se předávájí pomocí protokolu HTTP
• formuláře znají dva typy a to GET a POST
• názvy reflektují metody odesílání přímo v HTTP

Způsob GET

• způsob předávání dat pomocí parametrů v URL
• všechny prvky formuláře se předají v parametrech
• jménem parametru bude atribut name
• hodnota parametru bude vyplněná hodnota prvku

Jaké prvky nelze předávat pomocí URL parametrů?

Existuje nějaký limit velikosti URL adresy?

Způsob GET

Způsob POST

• data se předávají v tělu požadavku, jsou více skrytá
• lze předávat komplikovanější data (např. soubory)
• data si můžeme prohlédnout např. v DevTools

Způsob POST

Pozicování

• všechny prvky na stránce se pozicují různými způsoby
• existuje: static, relative, absolute, fixed, sticky
• jednotlivé typy si ukážeme

Umístění prvků

• nové vlastnosti: top, bottom, left, right
• říkají, jak se budou prvky umištovat ze stran
• jak fungují, si ukážeme u jednotlivých typů pozicování

Pozicování — static

• statické, neměnné
• základní pozicování, co známe
• prvky se umistují a řídí podle obyčejných vlastnosti (pomocí display) a místa na stránce
• nefungují vlastnosti top, bottom, left, right

Pozicování — relative

• relativní
• prvek se umístí tam, jako při statickém ale můžeme ho posouvat
• fungují vlastnosti top, bottom, left, right

Pozicování — fixed

• fixované
• prvek se na stránce nepohybuje, je vázán na velikost obrazovky
• prvek je nad ostatními, na jiné vrstvě a neovlivňuje jiné prvky

Pozicování — absolute

• absolutní
• prvek se zachytí na nejbližší prvek, na kterém je nějaké pozicování přesně nastavené (relative, absolute, ...)
• popř. na body
• jiná vrstva

Pozicování — sticky

• lepící
• mění se mezi stavy relative a fixed
• podle skrolování na stránce — dokud nenalezne dané odsazení
• potom se přilepí a hýbe se během skrolování

Vrstva

• vlastnost z-index
• číslo určující vrstvu
• čím vyšší číslo, tím bude vykresleno "ve předu"
• i záporné hodnoty

Srdíčko

Práce

Všechny strany

Práce

Proč my?

Práce