Formuláře v HTML

Na této stránce vysvětlím vkládání jednoduchých formulářů do stránek a základy jejich činnosti při odesílání dat. Účelem bude naznačit vzájemnou podobnost jednoduchých formulářů a jednoduchých odkazů.

Nejjednodušší formulář

Význam tagů

<input type=submit> je odesílací tlačítko. To "submit" znamená "potvrdit". Input je tag nepárový.

action="stranka.html" je cíl formuláře, prostě soubor, kterému se posílají případná data. V tomto případě se žádná data neposílají, odeslání formuláře funguje prostě jako odkaz na stránku stranka.html.

Tento nejjednodušší formulář funguje vlastně jako odkaz na stránku stranka.html.

Vstupní pole

Jistě se shodneme na tom, že jedno tlačítko je houby formulář. Je čas zkusit zadávat údaje.

Význam tagů

V první řadě jistě vidíte, že do formuláře se dá normálně vkládat obyčejný text (Oblíbené jídlo).

<input type=text> je tentokráte nikoli tlačítko, ale vstupní pole. Rozdíl dělá ten atribut type. Tag <input> dále obsahuje atributy size (šířka ve znacích), ale hlavně name.

name="jidlo" je životně důležitý atribut, podle něhož se vstupní pole identifikuje. Jde vlastně o název vstupního pole. Hodnota názvu (v tomto případě "jidlo") se bude posílat společně se zadanými daty. Atribut name musí mít každý vstupní prvek formuláře.

Předávání parametrů

Dejme tomu, že si do vstupního políčka vyplním text "ryby" a odešlu. Bude mě zajímat, co se stane a jaké bude URL (to, co se napíše do řádku adresy).

Cílem je stejně jako minule soubor stranka.html (to zajišťuje action), cestou k němu bude URL začínat. To, co je nyní důležité, se objeví za tím "stranka.html".

Objeví se tam otazník a nějaké parametry. V tomto případě tam bude ?jidlo=ryby

To "jidlo" odpovídá jménu textového vstupního pole (to je ten atribut name v tagu <input>). Text "ryby" jsem zadal před odesláním formuláře.

Oblast URL za otazníkem (za kterou bývá odpovědný formulář) se jmenuje "query string", někdy bývá označována jako "search" a já jí budu říkat prostě dotaz.

Podobnost s odkazem

Naprosto stejného efektu mohu dosáhnout odkazem, který bude mít trochu komplikovanější href:

Hlavní a jediný rozdíl je v tom, že takto jsou tam ty ryby napevno, takže se tam nedá zadat třeba sýr.

Více vstupních polí

Pokud je ve formuláři více vstupních polí, jednotlivé položky dotazu se samy oddělují znakem &. Například:

Zpracování parametrů

Tak fajn, cílová stránka dostala v dotazu (v URL) informaci o mém oblíbeném jídle. Co s tím udělá?

V našem konkrétním případu s tím neudělá nic, protože je to úplně obyčejná HTML stránka, která dotazy neumí zpracovávat. Prostě to za otazníkem ignoruje.

Serverové skripty

Jiná situace by byla, kdybychom formulář posílali na nějaký serverový skript. Jinak řečeno atribut action by musel být zacílen ne na soubor typu html, ale třeba PHP, ASP nebo CGI skript. (Mně osobně přirostly k srdci PHP skripty.)

Různé typy skriptů zpracovávají dotaz různými způsoby. Nejčastěji si ale položky dotazu převedou do proměnných, které dále zpracovávají. Nakonec pošlou prohlížeči výstup formátovaný do HTML.

Nechci ve váženém čtenáři vzbuzovat naději, že serverové skripty jsou něco snadného. Je to ostře těžká věc, v určitém smyslu vrchol webových technologií. Smiřte se s tím, že do jejich tajů neproniknete nijak lehce. Na druhou stranu nepropadejte panice -- všechno jde, když se chce. (Návod na serverové skripty zatím píšu. K nahlédnutí je návod Jak začít s PHP a možnosti PHP. Více najdete na www.kosek.cz/php)

Tento text si kladl za úkol pouze vysvětlit, jak se formulář vkládá na stránku a jakým způsobem odesílá data.