Na místo, 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:jmeno@domena.cz" method="post">
|
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řednastavené hodnoty.
|
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.
|
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.
|
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.
|
Rovnou se podívejte, co je výsledkem tohoto příkladu (zpět se vrátíte tlačítkem back ve vašem browseru).
Poznámky jsem vepsal přímo do textu příkladu (snad je to ta přehlednější varianta), ovšem chcete-li s příkladem experimentovat, budete muset jeho zdrojový text označit a přenést na několikrát.
Zde začíná příklad:
<body bgcolor=green>
<center>
<h2>Dotazník brance</h2>
<form action="mailto:kdosi@kdesi.cosi.cz" method="post">
<input type="hidden" name="typ" value="dotaznik_brance">
Příkazem <form> začíná definice formuláře, zaměňte kdosi@kdesi.cosi.cz třeba za vaši adresu. Skrytý prvek označený atributem Hidden se nezobrazí ve stránce, ale do výstupu se zaznamená jeho jméno s hodnotou.
<p><b>Jméno: </b><input name="jmeno" size="20" maxlength="64">
<b>Tajné heslo: </b><input type="password" name="heslo" size="20" value="kleslo">
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. Posílání hesel emailem je spíš pro legraci.
<p><b>Barva: </b>
<select name="barva">
<option selected>dobra
<option>spatna
</select>
<p><b>Zmrzlina: </b>
<select name="zmrzlina" size=3 multiple>
<option value="1" selected>pistáciová</option>
<option value="2">punčová</option>
<option value="3" selected>citronová</option>
<option value="4">oříšková</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>Brouk: </b>
<input type="radio" name="brouk" value="truhlik"> truhlík
<input type="radio" name="brouk" value="hovnival" checked> pytlík
<input type="radio" name="brouk" value="pecival"> hovnivál
<p><b>Oblečení: </b>
<input type="checkbox" name="obleceni" value="kosile"> košile
<input type="checkbox" name="obleceni" value="kabat"> kabát
Ve skupině radio buttonů a skupině check boxů jsou některé přednastavené atributem Checked.
<p><b>A k tomu chci dodat: </b><p>
<textarea name="blahblah" wrap=soft rows=3 cols=20>
Bližší košile, nežli kabát.
</textarea>
Textová oblast má taktéž přednastavený text - je to cokoliv, co se objeví za příkazem <textarea>.
<p><input type="submit" value="Odešli">
<input type="reset" value="Vymaž">
</form>
</center>
</body>
Formulář uzavírají dvě tlačítka: na odeslání a vygumování formuláře.
A tohle nám může přijít emailem:
typ=dotaznik_brance&jmeno=Alibaba&heslo=kleslo
&barva=spatna&zmrzlina=2&zmrzlina=4&brouk=truhlik
&obleceni=kabat&blahblah=Bli%9E%9A%ED+ko%9Aile.%0D%0A
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!
|