Když tvoříte formulář, používáte frameworky nebo tvůrce formulářů. Pod kapotou ale všichni používají HTML formuláře. Když pochopíte, jak HTML formuláře fungují, pochopíte vše ostatní. Nejste závislí na žádném nástroji ani frameworku. Znáte základy.
Tento článek se věnuje prvku formuláře v HTML, typům polí, popiskům, ověřování a tomu, jak se formuláře skutečně odesílají. Žádné frameworky. Žádné knihovny. Jen HTML a principy, na kterých stojí všechno ostatní.
Prvek formuláře v HTML
Formulář je prvek HTML, který obaluje pole formuláře a posílá jejich data někam dál. Základní struktura vypadá takto:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Důležité jsou tři atributy. Atribut action říká formuláři, kam poslat data. "/submit" znamená odeslat na adresu /submit na vašem serveru. Pokud je action prázdný, formulář se odešle na aktuální stránku. Atribut method říká formuláři, jak data putují. POST posílá data v těle požadavku (bezpečně, skrytě před URL). GET připojí data k URL (nebezpečné pro citlivá data, užitečné pro vyhledávací dotazy). Atribut enctype je potřeba jen při nahrávání souborů. Nastavte enctype="multipart/form-data", když má formulář pole pro soubor.
Vše uvnitř značek formuláře je součástí odeslání. Když uživatel klikne na tlačítko odeslání, prohlížeč posbírá všechna pojmenovaná pole a pošle je na adresu z action zvolenou metodou.
Typy polí a co dělají
text
<input type="text" name="first_name">
Jednořádkové textové pole. Prohlížeč zobrazí základní textové pole. Žádné ověření. Povolen je jakýkoli znak.
<input type="email" name="email">
Pole pro e-mailové adresy. Na počítači vypadá jako textové pole. Na mobilu prohlížeč zobrazí e-mailovou klávesnici. Po odeslání prohlížeč zkontroluje, že hodnota vypadá jako e-mail (obsahuje @). Jen základní ověření.
password
<input type="password" name="password">
Text, který se při psaní skrývá za tečky nebo hvězdičky. Hodnota se přesto přenáší jako prostý text, proto u formulářů s polem pro heslo vždy používejte HTTPS.
number
<input type="number" name="age">
Na počítači textové pole, které přijímá jen čísla. Na mobilu prohlížeč zobrazí číselnou klávesnici. Prohlížeč zabrání zadání nečíselných znaků.
date
<input type="date" name="birth_date">
Výběr data. V podporovaných prohlížečích a zařízeních se po kliknutí na pole otevře kalendář. Hodnota má formát RRRR-MM-DD.
checkbox
<input type="checkbox" name="agree" value="yes">
Políčko, které se zapíná a vypíná. Je-li zaškrtnuté, hodnota pole se při odeslání pošle. Není-li zaškrtnuté, pole se neodešle vůbec.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Více přepínačů se stejným názvem tvoří skupinu. Vybrat lze vždy jen jeden. Hodnota vybraného se při odeslání pošle.
select (rozbalovací seznam)
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Rozbalovací nabídka. Hodnota vybrané možnosti se při odeslání pošle.
textarea
<textarea name="message"></textarea>
Víceřádkové textové pole. Uživatelé mohou psát odstavce. Hodnota obsahuje zalomení řádků.
file
<input type="file" name="resume">
Tlačítko, které otevře výběr souborů v zařízení. Vybraný soubor se pošle na server. Vyžaduje enctype="multipart/form-data" na prvku formuláře.
hidden
<input type="hidden" name="user_id" value="12345">
Pole, které se nezobrazuje, ale při odeslání se pošle. Hodí se pro sledovací data, která mají být součástí odeslání, ale uživatel je nemá měnit.
Popisky a přístupnost
Pole vždy spárujte s popisky.
<label for="email">Email address</label>
<input type="email" id="email" name="email">
Atribut for na popisku se musí shodovat s id na poli. Když to uděláte správně:
Čtečky obrazovky přečtou popisek a pole společně, kliknutí na popisek aktivuje pole a uživatelé mobilů dostanou větší plochu k ťuknutí.
Nikdy popisky nevynechávejte. Pokud popisek potřebujete vizuálně skrýt, skryjte ho pomocí CSS, ale nechte ho v HTML. Říká se tomu "vizuálně skrytý" popisek.
Seskupení souvisejících polí
Pro související pole použijte fieldset a legend.
<fieldset>
<legend>Shipping address</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Prvek legend oznámí skupinu čtečkám obrazovky. Fieldsety pomáhají vizuálně i významově uspořádat přepínače a zaškrtávací políčka.
Odeslání formuláře a metody HTTP
Když uživatel klikne na tlačítko odeslání, prohlížeč posbírá všechna pojmenovaná pole, zakóduje data (ve výchozím nastavení application/x-www-form-urlencoded), pošle požadavek HTTP na adresu z action danou metodou (POST nebo GET) a čeká na odpověď.
Server požadavek přijme a může data zpracovat. Data přicházejí jako dvojice klíč a hodnota. Pokud je metoda formuláře POST a action je "/submit", požadavek vypadá takto. POST /submit HTTP/1.1 s Content-Type nastaveným na application/x-www-form-urlencoded, a data se objeví jako email=user@example.com&name=John.
Server data zpracuje a odpoví. Pokud je odpovědí stránka, prohlížeč ji načte. Pokud je odpovědí přesměrování, prohlížeč přejde na novou URL.
Ověřování na straně klienta
HTML má vestavěné atributy pro ověřování. Prohlížeč je zkontroluje před odesláním formuláře.
required
<input type="text" name="email" required>
Pole musí mít hodnotu. Pokud zůstane prázdné, formulář se neodešle a prohlížeč zobrazí chybu.
minlength a maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Hodnota musí mít počet znaků v zadaném rozmezí.
min a max
<input type="number" name="age" min="18" max="120">
U číselných polí musí být hodnota v daném rozsahu.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Regulární výraz, kterému musí hodnota odpovídat. Pětimístné PSČ odpovídá [0-9]{5}.
Ověřování na straně klienta je pohodlí pro uživatele. Brání tomu, aby odeslali neplatná data a viděli chybu ze serveru. Na ověřování na straně klienta se ale nikdy nespoléhejte kvůli bezpečnosti. Vždy ověřujte i na serveru.
Rozdíl mezi type="submit" a type="button"
<button type="submit">Send</button>
<button type="button">Save</button>
Tlačítko s type="submit" po kliknutí formulář odešle. Tlačítko s type="button" ve výchozím stavu nedělá nic. Použijte type="button", když chcete připojit obslužné funkce JavaScriptu.
Mnoho vývojářů používá <button> bez určení typu. To se výchozím nastavením chová jako type="submit", což je obvykle to, co chcete. Ale buďte explicitní, abyste předešli překvapením.
Proč byste měli rozumět HTML formulářům
Pokud používáte moderní JavaScriptový framework, stavíte na HTML formulářích. Frameworky skrývají detaily, ale základní principy jsou stejné. Formulář se stále odesílá na koncový bod. Ověření se stále musí dít. Server stále musí data zpracovat.
Když se ve zpracování formuláře něco rozbije, porozumění HTML vám pomůže s laděním. Víte, odkud data přicházejí, jak se kódují a co má server dostat. To je základ.
Většina moderních webových aplikací už tradiční odeslání formuláře nepoužívá. Pomocí JavaScriptu formulář zachytí, ověří ho a odešlou data přes _blocked_ nebo podobnou knihovnu. Ale když znáte nejdřív cestu přes HTML, tyto postupy dávají smysl.
Jak tvůrce formulářů WEMASY tyto principy využívá
Pod kapotou tvůrce formulářů od WEMASY generuje přístupné HTML formuláře se stejnými prvky. Popisky jsou spárované s poli. Ověřování probíhá na straně klienta i serveru. Data z formuláře se odesílají bezpečně. Pokud formulář WEMASY exportujete nebo upravujete, pracujete s HTML formuláři postavenými na těchto základech.
Podrobnosti o funkcích formulářů a možnostech přizpůsobení najdete v ceníku WEMASY.