Úvod a cíle

Modul formulářů: Prvky form a input

Formuláře se staly nepostradatelnou součástí Internetu. Kdykoliv jako návštěvníci webových stránek vyplňujete informace a používáte tlačítka ke spouštění různých akcí (např. zadáváte klíčová slova do vyhledávače, píšete do knihy hostů, nakupujete v internetovém obchodě, odesíláte emaily na internetovém rozhraní), využíváte tak nevědomky služeb formulářů (ty bývají též často spojené s funkcí nějakého skriptu).

Prvek formuláře

Prvek <form> </form>

• Z anglického form neboli formulář.
• Označuje začátek a konec formuláře (celý formulář je uzavřen v tomto prvku).
• Formulář může být vnořen přímo do prvku body.

Hlavním účelem formuláře je získání informací od návštěvníků stránek a jejich následné zpracování. Informace vyplněné návštěvníkem se tedy později musí odeslat na příslušná místa. K tomu slouží atributy action a method.

Atribut action

• Z anglického action neboli akce.
• Specifikuje URI dokumentu, který přijme formulářová data po jejich odeslání.
• Cílovým souborem uvedeným v URI bývá nejčastěji nějaký skript, který je naprogramován tak, aby přijatá formulářová data patřičně zpracoval.
• Povinný atribut prvku formuláře.

Formulář, jehož zpracování má na starosti skript umístěný někde na Internetu, by tedy mohl vypadat nějak takto:

<form action="http://www.domena.cz/skript.php">

...

</form>

URI může mít i formát emailové adresy, které předchází deklarace protokolu mailto (stejně jako u hypertextového odkazu). V takovém případě jsou formulářová data odeslána na danou emailovou adresu pomocí emailového klienta uživatele.

Formulář, jehož data budou odeslána na email, by tedy mohl vypadat nějak takto:

<form action="mailto:email@domena.cz">

...

</form>

Atribut action však sám tvoří pouze půlku informace. U prvku form musíme dále specifikovat, jak budou formulářová data odeslána.

Atribut method

• Z anglického method neboli metoda.
• Specifikuje metodu odeslání dat.

Existují dvě základní metody odeslání dat: metoda "get" a metoda "post". Metoda "get" dobře poslouží k odeslání menšího množství krátkých jednoduchých dat, zatímco metoda "post" je vhodná i pro rozsáhlejší a choulostivější data (např. delší složitější text nebo heslo).

Formulář, jehož zpracování má na starosti skript umístěný někde na Internetu, a jehož data budou odeslána metodou post, by tedy vypadal takto:

<form action="http://www.domena.cz/skript.php" method="post">

...

</form>

V našich příkladech budeme používat výlučně metodu "post". Co se týče URI, kam formulářová data odesílat, použijeme cvičný skript, který byl vytvořen speciálně pro tento kurz. Tento skript po odeslání formuláře vypíše na stránku všechna jemu odeslaná formulářová data. Nachází se na této adrese:

http://www.kvd.zcu.cz/cz/materialy/stahnout/dp_sroto/echo.php

Naše cvičné formuláře budou tedy vždy vypadat nějak takto:

<form action="http://www.kvd.zcu.cz/cz/materialy/stahnout/dp_sroto/echo.php" method="post">

...

</form>

Všechny další formulářové prvky patřící do Modulu formulářů se vnořují do prvku form, ovšem tento prvek jim nemůže sloužit jako přímý rodič. To znamená, že všechny další formulářové prvky potřebují být vnořeny např. do prvku odstavce, do prvku oddílu apod. Oddíly bývají ve formulářích využívány zvlášť hojně. Větší formulář může být rozčleněn do menších oddílů a každému oddílu může být v případě potřeby přiřazen atribut id. S takto označeným oddílem se pak později dá pracovat samostatně.

Formulář používající oddíly může vypadat například takto:

<form action="http://www.kvd.zcu.cz/cz/materialy/stahnout/dp_sroto/echo.php" method="post">

<div id="prvni_oddil"> oddíl formuláře </div>

<div id="druhy oddil"> oddíl formuláře </div>

</form>

Prvek input

Prvek input umožňuje vkládání téměř všech důležitých částí formuláře. Pro tento prvek je charakteristická jeho schopnost vkládat velmi rozličné formulářové objekty.

Prvek <input />

• Z anglického input neboli vstup.
• Prvek sloužící pro vstup informací z uživatelovy strany.
• Prvek s prázdným obsahem.
• Nesmí být vnořen přímo do prvku form, potřebuje dalšího rodiče.

Prvek input může na výstupu vypadat jako obyčejné textové pole, zaškrtávací políčko nebo tlačítko. Jak bude vypadat, a k čemu bude sloužit, závisí na jeho typu aneb na hodnotě atributu type.

Prvek input jako pole

Prvek input bude při následujících hodnotách atributu type představovat pole (aneb co vyplní uživatel).

input type="text"

• Vloží pole pro vyplnění krátkého textu.

input type="password"

• Vloží pole pro vyplnění hesla.
• Vepsané heslo se navenek zobrazí v podobě hvězdiček.

input type="file"

• Vloží pole pro výběr souboru z počítače.
• Vedle pole se automaticky zobrazí tlačítko Procházet, které nám umožní soubor v počítači vyhledat a vybrat.

Atributy name a value

Jak již bylo řečeno, hlavním účelem formuláře je získání informací od návštěvníků stránek. Díky atributům action a method u prvku form už umíme zadat, jak a kam budou formulářová data odeslána. Ale jak vlastně odesílaná data vypadají? Tato data se zjednodušeně řečeno skládají ze dvou částí - ze jména informace (hodnota v atributu name) a informace samotné (hodnota v atributu value).

Odesílaná data mohou vypadat například takto:

name="nejoblibenejsi_barva" value="červená"

Proto musíme i prvku input přiřadit nějaké to name.

Ukázka formuláře s prvkem input typu text, password a file je uvedena v příkladu . Pozorně si prohlédněte kód příkladu a všimněte si, že každému prvku input je přiřazeno jiné name. Spusťte ukázku a zkuste vyplnit jednotlivá políčka.

Hodnotu value přiřadí návštěvník stránky políčku tím, že dané pole vyplní a pak formulář odešle. Atribut value se však dá též předdefinovat přímo v kódu. Pokud tak učiníme, pak se hodnota atributu value implicitně zobrazí i v daném poli na obrazovce.

Ukázka formuláře s přednastavenými hodnotami value u prvků input je uvedena v příkladu . Přednastavit hodnotu value u prvku input typu file nelze.

Informace, jež návštěvník stránek ve formuláři vyplní, jsou k ničemu, pokud nejsou odeslány na patřičná místa. K spuštění odesílacího procesu a k provádění dalších akcí jsou zapotřebí tlačítka.

Prvek input jako tlačítko

Prvek input bude při následujících hodnotách atributu type představovat tlačítka (aneb co stiskne uživatel).

input type="submit"

• Vloží tlačítko, které po stisknutí zahájí odesílání vyplněných dat na URI uvedené v atributu action.
• Na tlačítku je zpravidla implicitně zobrazen nápis Odeslat dotaz.

input type="reset"

• Vloží tlačítko, které po stisknutí nastaví všechny změněné hodnoty ve formuláři na původní.
• Na tlačítku je zpravidla implicitně zobrazen nápis Obnovit.

input type="button"

• Vloží jiné tlačítko, jemuž musíme sami přiřadit nějaký název a funkci, aby mělo smysl (funkci lze nadefinovat např. v jazyku JavaScript či VB Script a později ji tlačítku přiřadit).

Tlačítkům nemá zpravidla smysl přiřazovat atribut name, neboť nenesou žádnou informaci vyplněnou uživatelem - pouze zahajují určitou akci.

Teď už známe všechno, co potřebujeme k vytvoření funkčního a smysluplného formuláře. Víme, že atributy action a method u prvku form určují, kam a jak budou data odeslána, atributy name a value u políček určují, jaká data budou odeslána a tlačítka se starají o spouštění akcí.

Ukázka kompletního formuláře je uvedena v příkladu . Pozorně si prohlédněte kód příkladu, spusťte ukázku, vyplňte formulář a vyzkoušejte si funkci jednotlivých tlačítek. Pokud nejste připojeni k Internetu, nemáte přístup ke skriptu zpracovávajícímu formulářová data a po odeslání formuláře se žádaný výstup nezobrazí. V takovém případě se podívejte na obrázek . Jsou zde zobrazeny výstupy skriptu v případě, že

a) Formulář odešlete bez vyplnění, tak jak je.

b) Do kolonky pro jméno vyplníte Tomáš Jedno, do kolonky heslo ahoj123, jako soubor vyberete stranka1.htm v adresáři _stranky na disku F a formulář odešlete.

Atribut value

Atribut value nám v případě tlačítek poslouží k přiřazení nápisu na tlačítko (u typu "button") či změně nápisu na tlačítku (u typů "submit" a "reset"). Jednoduše přiřadíme námi vybraný text do atributu value a tento se pak zobrazí i na tlačítku.

Teď se ale vraťme k tomu, jak nám může posloužit tlačítko typu "button". Je zřejmé, že bez toho, abychom mu přiřadili funkci napsanou v nějakém skriptovacím jazyce, je takové tlačítko k ničemu. Skripty nejsou součástí jazyka XHTML ani HTML, ale většina webových prohlížečů s nimi umí pracovat. Skripty obsahují předdefinované funkce a umožňují nám vytvářet i své vlastní. Typickou předdefinovanou funkcí např. v JavaScriptu je příkaz alert, který je následován libovolným textem uzavřeným do jednoduchých horních uvozovek a závorek. Tato funkce má za následek, že daný text se zobrazí v podobě hlášky.

Syntaxe příkazu alert v jazyce JavaScript tedy vypadá takto:

alert('Hláška')

Jak ale takový JavaScript tlačítku přiřadit? V tom nám přichází na pomoc obecné atributy událostí (podrobně byly popsány v článku "Obecné atributy v XHTML"). Z existujících událostí se pro tlačítko nejlépe hodí událost onclick (skript se spustí klepnutím na tlačítko). Přiřazení skriptu alert události onclick by tedy vypadalo takto:

onclick="alert('Ahoj!')"

Ukázka formuláře s tlačítkem, jemuž je přiřazen skript, je uvedena v příkladu . V tomto příkladu atributy prvku form nejsou využity, protože jedinou akci na stránce obstarává skript. Zkuste v příkladu změnit text hlášky alert.

Prvek input jako zaškrtávací políčko

Prvek input bude při následujících hodnotách atributu type představovat zaškrtávací políčka (aneb co vybere uživatel).

input type="checkbox"

• Každý prvek input typu checkbox vloží jedno zaškrtávací políčko v podobě čtverečku.
• Více těchto prvků pohromadě vytváří nabídku, v níž je povoleno zaškrtnout více možností.

input type="radio"

• Každý prvek input typu radio vloží jedno zaškrtávací políčko v podobě kolečka.
• Více těchto prvků pohromadě vytváří nabídku, v níž je povoleno zaškrtnout nejvýše jednu možnost.

Atributy name a value

V případě zaškrtávacích políček musí být každému prvku input přiřazeny atributy name i value, neboť návštěvník sám žádný text do formuláře nevkládá, pouze vybírá již předdefinované možnosti. Každé možnosti proto musí být přiřazeno jméno i hodnota.

Každé zaškrtávací políčko by mělo být následováno slovním vyjádřením dané možnosti. Například takto:

Vyberte z následujících možností: <br />

<input type="radio" name="vyber" value="prvni" /> první možnost <br />

<input type="radio" name="vyber" value="druha" /> druhá možnost <br />

<input type="radio" name="vyber" value="treti" /> třetí možnost <br />

Ukázka vytvoření nabídky možností za pomoci prvku input typu radio je uvedena v příkladu . Zjistěte, zda lze v tomto příkladu vybrat z nabídky více možností najednou. Všimněte si, že u typu "radio" mají všechny možnosti vztahující se k té samé otázce stejnou hodnotu atributu name.

Ukázka vytvoření nabídky možností za pomoci prvku input typu checkbox je uvedena v příkladu . Zjistěte, zda lze v tomto příkladu vybrat z nabídky více možností najednou. Všimněte si, že u typu "checkbox" má každá možnost jinou hodnotu atributu name.

Důvod, proč je v příkladu atribut name vždy stejný a v příkladu pokaždé jiný, je jednoduchý. U typu "radio" se smí odeslat jen jedna hodnota. V příkladu se tedy odešle nejobl_barva s hodnotou cervena, zelena, modra, zluta, hneda nebo cerna. Není důvod, abychom dávali každé možnosti jiné jméno. Na druhé straně "checkbox" povoluje zaškrtnout (a tím pádem i odeslat) více možností najednou - proto musí být každá možnost pojmenovaná jinak.

Vyzkoušejte v příkladech a odeslat vámi vybrané hodnoty formuláře ke zpracování a věnujte pozornost výstupu skriptu. Pokud nejste připojeni k Internetu, podívejte se na obrázky a .

Na obrázku jsou zobrazeny výstupy cílového skriptu v případě, že

a) Formulář v příkladu odešlete bez vyplnění tak jak je.

b) V příkladu zaškrtnete v nabídce modrou barvu a formulář odešlete.

Na obrázku jsou zobrazeny výstupy skriptu v případě, že ve formuláři v příkladu

a) Zaškrtnete červenou barvu a formulář odešlete.

b) Zaškrtnete všechny nabídnuté možnosti a formulář odešlete.