Lekce 12 - Formuláře v HTML

V předchozím kvízu, Kvíz - Textové tagy a multimédia v HTML5, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

Formulář je část stránky, která se běžnému uživateli jeví podobně jako dialogové okno. Slouží k získávání informací od uživatele, které jsou následně odeslány na server ke zpracování. K tomu se používají serverové skripty. Musíme tedy vytvořit stránku s formulářem a ještě skript, který zaslaná data správně zpracuje (například pomocí programovacího jazyka PHP). Formulář může obsahovat různá vstupní pole, tlačítka a přepínače. Na základě odeslaných dat (např. políčka s emailovou adresou a textem zprávy) provede aplikace na serveru požadovanou operaci (např. odešle e-mail na zadanou adresu a se zadaným textem).

S formuláři souvisí pojem webová aplikace. Tak se říká dynamickým "webovým stránkám", které se od obyčejných stránek značně oddalují a blíží se spíše aplikaci, jaké běžně známe z desktopů. Nejedná se tedy již o stránku jako dokument, ale o stránku jako program, který od uživatele bere nějaký vstup a poté na něj reaguje, případně opět vrací nějaká data. Formulářů může být na jedné stránce více, ale nesmí být do sebe vnořeny.

<form>

Formulář se vkládá do stránky pomocí tagu <form>. Kód jednoduchého formuláře pro zadání jména a příjmení by mohl vypadat např. takto:

<form method="post">
    <label for="jmeno">Jméno:</label><br />
    <input type="text" id="jmeno" name="jmeno" /><br />
    <label for="prijmeni">Přijmení:</label><br />
    <input type="text" id="prijmeni" name="prijmeni" /><br />
</form>

Ukázka

Kód výše se v prohlížeči zobrazí následovně:

Atributy

Elementu <form> můžeme přiřadit následující atributy:

• accept-charset - Povolení pouze určitých znakových sad, které server akceptuje. Nejčastěji UTF-8.
• action - Určuje URL adresu skriptu, který bude formulář zpracovávat. Pokud není uveden, data z formuláře se odešlou na to samé URL, na kterém je formulář (viz příklad výše). Explicitně můžeme zadat adresu skriptu takto:

<form action="vyhodnoceni.php" method="post">

• method - Určuje metodu odeslání dat. Máme k dispozici 2 metody: GET a POST. Metoda GET je výchozí hodnota (pokud tento atribut neuvedeme) a označuje metodu poslání dat z formuláře pomocí hodnot v URL adrese. Setkáváme se zde s limitem délky hodnot, adresa nevypadá hezky a není zabezpečená - nepoužívejte to tedy pro přihlašování uživatele s heslem. Metoda POST označuje metodu odeslání dat, kdy jsou data zabalena v těle HTTP požadavku. Data jsou šifrována, schována a nemají omezenou velikost. Metoda POST se pro používání formulářů preferuje.
• autocomplete - Nabývá hodnot on a off, přičemž hodnota on je výchozí. Pokud je atribut autocomplete zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty, například "admin":

• name - Přiřazuje formuláři název. Používá se zejména, když je na stránce více formulářů nebo když s formulářem pracujeme např. pomocí JavaScriptu.
• novalidate - Atribut je hodnoty typu boolean. Atribut je zapnutý, pokud je uveden (na hodnotě nezáleží). Specifikuje, zda se má formulář před odesláním zvalidovat. Tento atribut můžeme dospecifikovat zvlášť u jednotlivých elementů formuláře.
• target - Specifikuje cílové umístění odpovědi formuláře. Hodnota _blank vyvolá odpověď v nové záložce, _top otevře odpověď v nejhlavnějším rámu, _parent v nadřazeném rámu a _self v aktuálním okně (to je výchozí hodnota). Jako hodnotu můžeme také uvést id rámu.
• enctype - Určuje způsob kódování obsahu formuláře. Výchozí hodnota je application/x-www-form-urldecode, kde jsou mezery nahrazeny plusy a speciální znaky jsou zkonvertovány na hexadecimální hodnoty. Dále můžeme zadat hodnotu multipart/form-data, která je vyžadována v případě, že má formulář pole k odeslání souboru. Tehdy se žádné znaky nenahrazují. Poslední hodnota je text/plain, kdy se nahrazují pouze mezery za plusy.

Formulář může obsahovat následující elementy:

<input>

Představíme si hned jeden z nejznámějších elementů ze sekce formulářů <input>. Používá se ve formulářích, které umožňují uživateli vkládat data. Může mít mnoho podob, které se liší různým nastavením atributů.

Typ definujeme pomocí atributu type. Jednotlivé typy vstupů se liší a proto si ukážeme jen ty nejzákladnější. Všechny atributy jsou shrnuty níže v tabulce:

Název	Popis
button	Tlačítko
checkbox	Zaškrtávací pole (checkbox)
color	Výběr barvy (color picker)
date	Výběr data (date picker)
datetime-local	Výběr data a času (datetime picker)
email	Zadání emailové adresy
file	Nahrání souboru (upload)
hidden	Skryté pole
image	Tlačítko s obrázkem k odeslání formuláře
month	Výběr měsíce a roku
number	Zadání čísla
password	Zadání hesla
radio	Přepínací tlačítko (radiobutton)
range	Zadání čísla posuvníkem
reset	Vyprázdní formulář
search	Vyhledávací pole
submit	Tlačítko k odeslání formuláře
tel	Zadání telefonního čísla
text	Zadání krátkého textu
time	Zadání času
url	Zadání URL adresy
week	Zadání týdnu a roku

Atributy

Následující atributy jsou společné pro všechny typy inputů:

• autocomplete - Nabývá hodnot on a off, přičemž hodnota on je výchozí. Pokud je atribut zapnutý, nabízí prohlížeč uživateli při vyplňování údajů našeptávač, který zobrazuje dříve zapsané hodnoty.
• disabled - Atribut je typu boolean. Pokud je uveden, nelze měnit hodnotu elementu a ten je často zobrazen jako zašedlý.
• list - Obsahuje id elementu
• readonly - Atribut je typu boolean. Pokud je uveden, nelze hodnoty v daném poli editovat.
• name - Definuje jméno elementu. Jméno musí být unikátní vzhledem k formuláři a je po odeslání použito jako klíč v dvojici klíč-hodnota, která se na server odešle.
• value - Přednastavená hodnota pole.
• autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
• form - Element <input> může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit pouze jednomu formuláři.

• pattern - Obsahuje regulární výraz, podle kterého se má hodnota v poli validovat.
• placeholder - Definuje text, který se zobrazí v případě, že je pole prázdné. Obvykle je vykreslen zašedle a slouží jako nápověda.
• required - Atribut je typu boolean. Pokud je uveden, znamená to, že pole musí být pro odeslání formuláře vyplněné.

<label>

Tag <label> je důležitým prvkem formulářů. Slouží k popisu polí, je to tedy text vedle pole, který udává, k čemu pole slouží. Mnoho lidí labely nepoužívá a vedle políčka vloží prostý text. To je ale špatně a projeví se to mimo jiné například u checkboxů, kde se při kliknutí na label (popis pole) políčko zaškrtne, ale při kliknutí na prostý text vedle textboxu se nestane nic a musíte se trefit přímo na políčko.

Atributy

Tento tag je párový a má následující atributy:

• for - Atribut obsahuje id elementu, ke kterému patří label.
• form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.

Ukázka

Checkbox s labelem může vypadat například takto (ukázka s labelem a bez labelu):

<form>
    <label for="spravne">Správně</label>
    <input type="checkbox" name="spravne" value="Správně" id="spravne" /><br />
    Špatně<input type="checkbox" name="spravne" value="Správně" />
</form>

Výsledek vypadá vizuálně stejně, nicméně text labelu je po kliknutí funkční na rozdíl od druhé varianty bez labelu:

Protože už víme, k čemu slouží element <label>, můžeme si ukázat jednotlivé atributy typu <input>.

checkbox

Typ checkbox je klasické zaškrtávací políčko. Je podobné radiobuttonu, ale je možné zaškrtnout více možností a tudíž musí mít každý unikátní název.

Atribut

U typu checkboxu můžeme ještě uvést atribut:

• checked - Atribut je typu boolean. Pokud je uveden, je políčko zaškrtnuto.

Ukázka

Uveďme si jednoduchou ukázku inputu typu checkbox:

<form>
    <input type="checkbox" id="novinky" name="novinky" value="1" checked="checked" />
    <label for="novinky">Přeji si zasílat novinky emailem.</label><br />
    <input type="checkbox" id="registrace" name="pravidla" value="1" />
    <label for="registrace">Souhlasím s pravidly registrace.</label>
</form>

A výsledek:

Na server jsou odeslána pouze zaškrtnutá pole. Na hodnotě v tomto případě nezáleží a je zvykem ji nastavovat na hodnotu 1 (jako true).

Pokud spolu checkboxy souvisí, můžeme si ulehčit práci tím, že je sdružíme do pole. Budou v atributu name mít hranaté závorky []. Na server poté přijde pole odeslaných hodnot indexované od 0:

Zvolte si ingredience na svou pizzu:<br />
<form>
    <input type="checkbox" id="syr" name="ingredience[]" value="syr">
    <label for="syr">Extra sýr</label><br />
    <input type="checkbox" id="zampiony" name="ingredience[]" value="zampiony">
    <label for="zampiony">Žampiony</label><br />
    <input type="checkbox" id="kukurice" name="ingredience[]" value="kukurice">
    <label for="kukurice">Kukuřice<br />
    <input type="checkbox" id="slanina" name="ingredience[]" value="slanina">
    <label for="slanina">Slanina</label>
</form>

Výsledek:

radio

Typ radio vytvoří přepínací tlačítko (tzv. radiobutton). Tlačítka seskupujeme tak, že jim dáme stejný název (atribut name). Při změně volby se původní volba odznačí. Odesláno potom bude jen jedno vybrané tlačítko.

Atribut

Typ inputu radio má pouze jeden atribut:

• checked - Atribut je typu boolean. Pokud je uveden, je daná možnost zaškrtnutá.

Ukázka

Ukázka inputu typu radio:

Vyberte si barvu vzhledu:<br />
<form>
    <input type="radio" id="zluta" name="barva" value="yellow" />
    <label for="zluta">žlutá</label><br />
    <input type="radio" id="modra" name="barva" value="blue" checked="checked" />
    <label for="modra">modrá</label><br />
    <input type="radio" id="cervena" name="barva" value="red" />
    <label for="cervena">červená</label>
</form>

Výsledek:

Pokud vás zajímá zpracování takových formulářů na serveru, doporučuji začít základy PHP a projít si tento jazyk. Pokud základy PHP již máte, můžete přejít na článek přímo o zpracování formulářů v PHP a formulář si zkusit zpracovat.

V další lekci, Formuláře v HTML II. část, se naučíme nové zajímavé typy inputů. Typ bude na čas, heslo, text, reset a i různá tlačítka pro odeslání formuláře.