ARCHIV

HTML (11) - formuláře

Formuláře se budou určitě hodit všem, kteří sledují i seriál o PHP. Dnes si řekneme něco málo z teorie a vytvoříme jednoduchý formulář.

19.8.2004 15:00 | Pavel Kácha | Články autora | přečteno 47472×

Co to je webový formulář

Webový formulář je část stránky složená z různých tlačítek, vstupních polí a přepínačů, která slouží pro získání nějakých dat od uživatele. Na základě těchto dat se potom provádí script (napsaný v PHP, Javě nebo v jakémkoli jiném jazyku) a jeho výsledek se nějak předá uživateli. Obvykle script formátuje text pomocí HTML značek a svůj výsledek předá prohlížeči, který ho zobrazí.

Z předchozího odstavce vyplývá, že formulář může být zajímavým zpestřením našich stránek, ale pokud chcete mít z formuláře nějaký výsledek, neobejdete se bez scriptů, které data z formuláře zpracují. Samotný formulář může plnit jedině funkci "datové Černé díry", tzn. že všechna data, která do formuláře vyplníte, se nenávratně ztratí. Po něčem takovém asi netoužíte, takže předpokládejme, že máte připraven script pro zpracování zadaných údajů.

Začínáme tvořit formulář

Formulář je na stránce označen pomocí párového tagu <form></form>. Ukončovací tag je povinný. Tímto způsobem určíme, které formulářové prvky (vstupní pole, tlačítka atd.) patří k sobě a budou se odesílat najednou - jednomu řídícímu scriptu. Jednotlivých formulářů může být na stránce libovolně mnoho, ale nesmí se navzájem nijak prolínat.

I element <form> má několik atributů, které ovlivňují jeho chování. Nejdůležitějšími atributy, které budete potřebovat vždy při použití formulářů, jsou action="" a method=""

Atributem action="" určíte, který script se má použít pro zpracování zadaných údajů. Pokud nemáte možnost použít žádný jazyk pro zpracování dat, můžete je odeslat na mail, stačí jen napsat jako hodnotu atributu action="" řětězec v takovémto tvaru:

Veškeré údaje potom přijdou pohodlně až do vaší schránky.

Hodnota atributu method="" určuje metodu jakou mají být data odeslána ke zpracování. Na výběr máte ze dvou možností.

1. get
2. post

get

Tato metoda se používá spíše pro odesílání menších formulářů. Uplatnění najde i u takových formulářů, kde příliš nezáleží na bezpečnosti (jednoduché stránkování), protože pokud odesíláme data metodou get, je velice jednoduché je zfalšovat a podstrčit scriptu nějaké nekorektní údaje. Proto pokud používáte metodu get, měli byste být velice opatrní a správnost zadaných dat klidně i několika způsoby kontrolovat. To platí i u motody post, ale tam je podstrčení špatných dat o malinko složitější.

Před přenosem se data musí "zakódovat" pro správný přenos. Při zakódování se nahradí mezery za znak +. Další speciální znaky (/, :, @, ;, ?, #, &, =, %, +, {, }, |, \, ^, ~, [, ]) a např. znaky s diakritikou se převedou do tvaru %xx, kde xx je hexadecimální kód znaku. O zakódování se postará automaticky prohlížeč.

Data jsou pak přidána k adrese stránky za otazník (?), jednotlivé položky jsou odděleny pomocí znaku and (&). A tady je právě největší problém: uživatel může velice jednoduše přepssat zadaná data a způsobit pád nebo špatnou funkci naší aplikace. Ukázková URL doplněná o data zaslaná metodou get může mít takovouto podobu:

Tímto způsobem předáme scriptu index.php vstupni promenné odkud (s hodnotou 50) a kam (s hodnotou 100).

post

Tato metoda kóduje zadaná data stejně jako get (pokud způsob kódování nezměníte atributem enctype="" - viz níže), ale posílá je zvlášť - mimo URL. Veškerá data se rovnou směrují na standardní vstup scriptu. Tato data se sice nikde nezobrazí, ale to neznamená, že je nejde změnit: pokud si připravíte vlastní formulář, který vrací stejně pojmenované proměnné a necháte ho zpracovat původním scriptem, může se vám podařit obelstít ochranu a způsobit pád nebo špatnou funkci aplikace.

Další atributy

Velice užitečná je možnost určit, jak se bude obsah adresáře kódovat. Slouží k tomu atribut enctype="". Výchozí hodnotou je application/x-www-form-urlencoded. Pro běžné formuláře, které načítajíjen textová data toto kódování naprosto stačí, ale pokud chcete přenášet i celé soubory (obrázky, dokumenty, tabulky...) musíte použít kódování multipart/form-data. Jak posílat přes formulář soubory si řekneme někdy příště.

enctype="" má smysl použít jen pokud posíláte data metodou post, protože metoda get umí jen výchozí způsob kódování (application/x-www-form-urlencoded)

Existuje také atribut accept-charset="", který určuje které znakové sady dokáže server zpracovat. Jako hodnota atributu se uvádí seznam znakových sad oddělených pomocí mezer nebo čárek a mezer. Výchozí hodnotou je unknown, prohlížeč potom bude posílat data ve stejném kódování jako má stránka, na které je formulář uveden.

Atributem accept="" definujete, které typy souborů formulář akceptuje. Hodnotou tohoto atributu je čárkami oddělený seznam povolených MIME-typů. Tento atirbut má cenu používat jen pokud ve formuláři načítáte soubory.

name="" nám dovoluje pojmenovat formulář, aby na něj bylo možné odkazovat v např. CSS a scriptech. Tento atribut je zachován pouze kvůli zpětné kompatibilitě, v současné době by se měl používat spíše atribut id="", který má tytéž vlastnosti.

Můžete použít i atribut target="", kterým definujete kam se má zobrazit výsledek po zpracování formuláře. O tomto atributu jsme už mluvili, takže pokud nevíte, jakou hodnotu máte nastavit, podívejte se do dílu o odkazech.

Další zajímavé atriburty jsou atributy onsubmit="" a onreset="". Script nebo funkce uložená jako jejich hodnota se provede po kliknutí na odesílací tlačítko resp. po kliknutí na vymazávací tlačítko.

Kromě těchto atributů můžete uvést i atributy, které jsou definovné pro všechny elementy HTML (id, class, lang, dir, title, style, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup).

Teorie už bylo dost

Teď si uděláme jednoduchý formulář. Trochu předběhnu, abych neunavoval dalšími definiceni, ale v příštím díle se na všechno zaměřím pěkně dopodrobna. Dnes zmíním jen základy nutné pro pochopení příkladu. Příklad bude formulář, který nám vyhledá obec podle zadaného PSČ. Využijeme k tomu PHP script ze seriálu Petra Zajíce.

Budeme potřebovat jedno políčko, do kterého zadáme hledané PSČ a tlačítko pro odeslání. Políčko vytvoříme napsáním

A pro vytvoření odesílacího tlačítka musíme napsat:

Ještě dodám, že script je umístěn script na adrese http://www.linuxsoft.cz/php/examples/38_psc.php (tam budeme formulář odesílat) a očekává data předaná metodou POST.

Zde je zdrojový kód našeho prvního formuláře.

A formulář vám samozřejmě nabídnu i ve funkční podobě:

Nashledanou přístě

Verze pro tisk