Formuláře

<form>=definice formuláře

Tam, kde chceme mít v dokumentu formulář, umístíme tento příkaz; konec definice formuláře označíme příkazem </form>. Dovnitř definice umístíme příkazy, které určují vzhled formuláře - definují jeho jednotlivé prvky: textová políčka, radio buttony, tlačítka, apod. Samotné formuláře však do sebe nemůžeme rekurzivně vnořovat. Jestliže má být v dokumentu více formulářů, musíme je umístit za sebe.

Schéma html dokumentu se dvěma formuláři:<html> <form> </form> <form> </form> </html>Action= URL, na které se odesílá vyplněný formulář
Na daném URL se nachází cosi - krátký prográmek - , co zpracuje vyplněný formulář. Může to být cgi-bin skript, pokud váš provider webu umožňuje používání cgi-bin skriptů a má pro vás takový skript nachystaný anebo pokud vy umíte programovat cgi-bin skripty.

My si dovolíme na cgi-bin skripty rovnou zapomenout. Využijeme toho, že URL může být i odkazem na email, začíná-li slovem „mailto:", za kterým je uvedena emailová adresa. Písmenkové změti (jak později uvidíme) si jednoduše necháme posílat do naší poštovní schránky.

Method= get, post
Udává způsob odeslání formuláře podle protokolu HTTP. Implicitně hodnota „get", my odesíláme formulář pomocí „mailto:" a použijeme „post" anebo atribut Method budeme rovnou ignorovat

Příklad formuláře, který se bude posílat na email:<form action="mailto:muj@mejl.cz" method="post">

<input>=prvek formuláře

Většinu formulářových prvků umístíte pomocí tohoto příkazu, přičemž to, o jaký prvek jde (text, tlačítko, check box) určíte až teprve atributem Type.

Name= text
Pojmenovává formulářový prvek, což se hodí právě ve chvíli, kdy z emailu luštíte jeho hodnotu. Pozor na tohle: zapomenete-li pojmenovat prvek, na obrazovce se zobrazí správně, ale po odeslání se z výstupu vůbec nedozvíte jeho hodnotu! Atribut Name navíc pomáhá rozčlenit radio buttony a check boxy do skupin podle pravidla "stejné jméno znamená stejnou skupinu."

Value= text
Hodnota, jež je vrácena v případě, že je zaškrtnutý daný radio button nebo check box. U textového prvku můžete pomocí Value nastavit dopředu jeho implicitní hodnotu. U tlačítek "submit" a "reset" nápis na tlačítku.

Checked
Radio buttony i check boxy jsou implicitně nezaškrtnuté (nenastavené), atribut Checked přidáte k těm, které chcete přednastavit.

Size= číslo
Šířka textového políčka ve znacích.

Maxlength= číslo
Maximální počet znaků, které jdou vložit do textového políčka. Hodnota může být vyšší, než hodnota atributu Size.

Align, Border, Height, Hspace
Čtyři atributy, které patří k prvku "image," mají tytéž vlastnosti, jako kdyby stály uvnitř příkazu <img>.

Src= URL
U prvku "image" určuje URL daného obrázku.

Type= hidden, text, password, radio, checkbox, image, submit, reset
Snad nejdůležitější atribut příkazu <input> udává typ formulářového prvku. Typy mohou být:

hidden: prvek se vůbec nezobrazuje, pouze se předává jeho hodnota. Užitečné v případě, pokud máme více formulářů a chceme rozlišit jejich výstupy: učiníme tak pomocí jména, jež jsme přiřadili prvku "hidden."
text

slouží k zadávání jednořádkového textu. Není-li určen typ prvku, bude se jednat implicitně o "text."
password

má sloužit ke vkládání hesel. Totéž co text, ale místo jakéhokoliv znaku se zobrazí pouze hvězdička.
radio

definuje radio button. Radio buttony se sdružují do skupin podle shodného jména, přičemž jejich základní vlastností je, že z jedné skupiny může být nastavený vždy pouze jediný radio button (jako když přepínáte na starém rádiu: dlouhé vlny - střední vlny - krátké vlny).
checkbox

definuje check box. Check boxy se sdružují do skupin podle shodného jména, ovšem tohle rozdělení je spíš symbolické (jedna skupina = check boxy k jednomu tématu). Ve skupině může být libovolný počet check boxů nastavený, zbytek je - co byste čekali - nenastavený. Implicitně jsou prvky skupiny nenastavené, nastavit je musíme užitím atributu checked.
image: umisťuje do formuláře obrázek. Kliknutí kamkoliv do obrázku ihned odešle vyplněný formulář. Nepředává se žádná hodnota (definovaná atributem value), nýbrž souřadnice bodu, do kterého jsme v obrázku kliknuli, a to ve formě name.x a name.y, kde name je jméno formulářového prvku.
submit: tlačítko, kterým vyplněný formulář odešleme.
reset: tlačítko, pomocí kterého formulář "vyčistíme:" všem jeho prvkům přiřadíme jejich původní hodnoty.

<select>=listbox

Listbox je jedním ze dvou formulářových prvků, které definujeme jinak, nežli příkazem <input>. V listboxu můžete z několika voleb vybrat jednu nebo více. Definici listboxu uvodíte příkazem <select> a uzavřete pomocí </select>, dovnitř definice umístíte jednotlivé volby uvozené příkazem <option>.
Name= text
Pojmenovává listbox.

Multiple
Atribut se uvádí, pokud chceme vybrat více jak jednu volbu.

Size= číslo
Udává počet řádků voleb, které se mají zobrazovat. S atributem Multiple činí implicitní hodnota tolik, co počet voleb, bez atributu Multiple je implicitní hodnota 1.

<option>=volba v listboxu

Příkaz se může vyskytovat jedině uvnitř definice listboxu a není nutné ho uzavírat jeho párovým ukončovacím příkazem </option>. Text, který uvedeme za příkaz <option>, se zobrazí ve výsledné stránce a bude popisovat danou volbu v listboxu.

Value= text
Hodnota, která bude předaná, pokud jsme volbu vybrali. Pokud atribut Value ignorujeme a neuvedeme hodnotu volby, předá se text za příkazem <option>.

Selected
Označuje již předvybranou volbu.

<textarea>=velké textové pole

Definuje oblast, do které lze napsat text přes více řádků. (Počítejte s tím, že můžete být omezeni nějakou maximální délkou textu, např. 1024 podle standardu HTML 2.0.) Implicitní hodnotu textové oblasti - inicializační text - vložíte mezi příkaz <textarea> a jeho párový ukončovací příkaz, který musí být přítomen.

Name= text
Pojmenovává oblast.

Cols= číslo
Šířka oblasti ve znacích.

Rows= číslo
Výška oblasti ve znacích.

Wrap= off , soft , hard
Zalamování řádek: pokud je vypnuto, text se odešle tak, jak byl napsán. Je-li "soft," text se odešle tak, jak byl napsán, v textové oblasti se ale budou při psaní dlouhá slova umisťovat na nový řádek. Je-li "hard," slova, co se nevejdou na řádek, se budou při psaní zalamovat na řádek nový a s tímto oddělovačem řádků se i odešlou.

Příklad

Příklad:

<body bgcolor=pink> <center> <h2>Dotazník</h2> <form action="mailto:posli@mejla.cz" method="post"> <input type="hidden" name="typ" value="dotaznik">Příkazem <form> začíná definice formuláře. Skrytý prvek označený atributem Hidden se nezobrazí ve stránce, ale do výstupu se zaznamená jeho jméno s hodnotou.

<p><b>Uživatelské jméno: </b><input name="jmeno" size="20" maxlength="64"> <b>Heslo: </b><input type="password" name="heslo" size="20" value="zavináč">
Všimněte si, že u dalšího prvku není uveden atribut Type a implicitně se předpokládá, že jde o typ textového políčka. Následuje prvek s heslem - textové políčko, ve kterém se každý znak zobrazí jako hvězdička, ale ve výstupu už bude zase sám sebou.

<p><b>Paměť (RAM) Vašeho PC: </b> <select name="RAM">

<option selected>málo <option>hodně </select> <p><b>Velikost "hadr-disku": </b> <select name="hadr" size=3 multiple>

<option value="1" selected>méně než 1 GB</option> <option value="2">1-5 GB</option> <option value="3" selected>5-10 GB</option> <option value="4">10 a více...</option> </select>Prvním příkazem <select> je označen listbox s možností vybrat jedinou volbu, druhý příkaz <select> nám umožní vybrat voleb více. Jednou jsou příkazy <option> uzavřeny svými párovými druhy, jednou nikoliv - obojí je možné.

<p><b>Mechanika: </b> <input type="radio" name="mechanika" value="ZIP 100"> ZIP 100" <input type="radio" name="mechanika" value="disketa 3,5"" checked> disketa 3,5" <input type="radio" name="mechanika" value="CD-ROM">CD-ROM <p><b>Hardweare: </b> <input type="checkbox" name="tiskarna" value="tiskarna"> tiskárna <input type="checkbox" name="scaner" value="scaner"> scanerVe skupině radio buttonů a skupině check boxů jsou některé přednastavené atributem Checked.

<p><b>Vostatní kecy: </b><p> <textarea name="kecy" wrap=soft rows=5 cols=50> Mam taky modem. </textarea>Textová oblast má taktéž přednastavený text - je to cokoliv, co se objeví za příkazem <textarea>.

<p><input type="submit" value="Už to konečně vodešli"> <input type="reset" value="!Smaž to!"> </form> </center> </body>

Formulář uzavírají dvě tlačítka: na odeslání a vygumování formuláře.

Výsledek

A tohle nám může přijít emailem:

typ=dotaznik&jmeno=%8Amejky&heslo=INTERNET_MANIA &RAM=hodn%EC&hadr=4&mechanika=ZIP+100&tiskarna=tiskarna &scaner=scaner&kecy=Mam+taky+modem+a+mikrofon....

Hodnoty jednotlivých formulářových prvků jsou odděleny znakem "&," místo mezery je znak plus, znaky s nabodeníčky v jejich (hexa!) ascii kódech. Luštění zdar!