Úvod do formulářů

Dva problémy - Nejjednodušší formulář - Vstupní pole - Zpracování parametrů

Dva problémy

  1. Vložit formulář do stránky
    Lze to zajistit celkem snadno pomocí několika HTML tagů. Většina návodů popisující formuláře se zabývá pouze tímto problémem.
  2. Zajistit jeho funkčnost
    Uvést formulář do provozu tak, aby fungoval, je problém mnohem obtížnější. Obvykle je na to potřeba použít nějaký program nebo skript. Potíže jsou pak dvojí:
    1. umět to rozběhat
    2. smět to rozběhat (mít práva a podporu na serveru).

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ů. Řeším tu tedy pouze ten první problém.

Nejjednodušší formulář

Do HTML kódu se vloží tato sekvence:

 

<form action="stranka.html">
   <input type=submit value="odeslat">
</form>

 

Takhle to vypadá:

Funguje to vlastně jenom jako odkaz na stránku stranka.html. Můžete se podívat na stránku s příkladem.

 Význam tagů

<form> začíná a končí formulář.

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

value="odeslat" je nápis na tlačítku.

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

Takže opakuji: 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.

<form action="stranka.html">
    Oblíbené jídlo:
    <input type=text
size=16 name="jidlo">
    <input type=submit value=odeslat>
</form>

Takhle to vypadá:

Oblíbené jídlo:

Můžete se podívat na příklad, zadat si hodnotu a zkusit odeslání.

Význam tagů

V první řadě jistě vidíte, že do formuláře se dá normálně vkládat obyčejný text (popisek "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. Text 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.

Jinak je vše jako v předchozím příkladu.

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".

Konec adresy cílové stránky .../stranka.html?jidlo=ryby

Objeví se tam otazník a nějaké parametry. V tomto případě tam bude ?jidlo=ryby (slovo ryby jsem tam vyplnil před odesláním).

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", v minulosti bývala 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:

<a href="stranka.html?jidlo=ryby">Oblíbené jídlo</a>

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

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:

...stranka.html?jidlo=ryby&piti=caj

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, kdybych formulář posílal na nějaký svůj serverový skript. Jinak řečeno atribut action by musel být zacílen nikoliv na soubor typu html, ale třeba PHP, ASP nebo CGI skript. (Mně osobně přirostly k srdci PHP skripty a příklad pokračuje v článku PHP - zpracování hodnot z formuláře.)

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 napsat nezvládám, ale napsal jsem stránky jak začít s PHP a možnosti PHP.)

Parazitní formuláře

Výsledky formuláře můžete také poslat na cizí server a využívat tak jeho možnosti. Action musí být nastavena na absolutní adresu cizí stránky.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.