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!