Formuláře na Webu

Součástí HTML stránky může být tzv. formulář, neboli místo, kde uživatel může zadávat nějaká data. Klasickým ...


Součástí HTML stránky může být tzv. formulář, neboli místo, kde uživatel může
zadávat nějaká data. Klasickým způsobem zpracování formulářů, obsaženým již v
normě HTML 2.0, je možnost CGI (pochází z anglických slov Common Gateway
Interface). Zjednodušeně řečeno, toto rozhraní definuje, jak se data obsažená v
HTML formuláři zpracují na serveru. Protože je k zpracování dat nutný program
na serveru, nebudeme si ukazovat skutečné spouštění tzv. CGI skriptu (programu
na serveru), ale ukážeme si pouze vytvoření formuláře v HTML.
Formulář vytvoříme pomocí příkazu form:
<html> <head> </head> <body>
<form action="http://www.moje.cz/zpracuj">
<input type=text value="ahoj" size=20> <br>
<input type=checkbox> Zaskrtni me. <br>
<input type=submit value="Posli to">
</form>
</body></html>
Uvnitř příkazu form se mohou vyskytovat jednotlivé příkazy input, které
vytvářejí jednotlivé položky formuláře. Příkazy input mají nejdůležitější
parametr type tento parametr určuje typ položky. V příkladu jsme použili typ
text, checkbox a submit. Další možností jsou button, radio, password, reset a
hidden. Přesnou syntaxi a význam těchto příkazů najdete v dokumentaci k HTML.
Parametr action určuje URL programu, který se má vyvolat na zpracování vstupu z
formuláře. Tento program většinou bývá na serveru mezi speciálními druhy
programů jako tzv. CGI skript. Pokud nemáme k dispozici zpracovávající CGI
skript, máme ještě dvě možnosti, jak se dá s daty z formuláře naložit.
Nejjednodušší možnost je nechat si zaslat vyplněná data poštou. K tomu je třeba
pouze změnit URL v příkazu action na typ mailto:
<form action="mailto:david@www.erudio.cz">
Pokud si data nechceme pouze poslat, ale potřebujeme nějak zareagovat na jejich
obsah, použijeme JavaScript.
JavaScript
Druhou možností, jak zpracovat formulář, je použití JavaScriptu. Nejprve si
ukážeme, jak pomocí JavaScriptu zkontrolujeme data vyplněného formuláře.
Abychom se mohli na jednotlivé položky formuláře odvolávat, je nutné uvést u
formuláře i u vstupních položek parametr NAME:
<html><head></head><body>
<form name=formular
action="mailto:strupl@www.erudio.cz">
Zadej sve prijmeni:
<input type=text name=prijmeni size=20> <br>
<input type=submit value="Posli to">
</form>
</body></html>
Pokud máme jednotlivé položky pojmenovány, můžeme napsat funkci, která
zkontroluje, zda je formulář správně vyplněn. Ukážeme si, jak zkontrolovat, zda
uživatel vyplnil položku prijmeni:
<html><head></head>
<SCRIPT>
function kontrola(){ if (document.formular.prijmeni.value.length == 0) {
alert("Prijmeni musi byt zadano."); return false } else { return true }
}
</SCRIPT>
<body>
<form name=formular action="mailto:strupl@ss1000.ms.mff.cuni.cz"
onSubmit="return kontrola()">
Zadej sve prijmeni:
<input type=text name=prijmeni size=20> <br>
<input type=submit value="Posli to">
</form>
</body></html>
V tomto příkladu jsme napsali funkci kontrola, která zkontroluje délku vstupu v
položce prijmeni. Vidíme, že na položky ve formuláři se odkazujeme pomocí jmen,
která jsme zadali pomocí parametrů NAME jednotlivým elementům (i formuláři
samotnému). Formulář jsme si pojmenovali formular, tj. obsah vyplněného
příjmení dostaneme jako document.formular.prijmeni. Funkce na vyhodnocování
formuláře je napsána v rámci HTML příkazu <SCRIPT>, který uvádí příkazy
JavaScriptu. Funkce kontrola je zavolána z formuláře pomocí příkazu onSubmit.
Příkaz onSubmit se vykoná před odesláním formuláře ke zpracování.
Pokud nechceme formulář nikam posílat, je možné napsat zpracování vstupu přímo
do HTML bez nutnosti odeslání formuláře. Ukážeme si, jak se pomocí JavaScriptu
rozhodnout, jakou stránku uživatel uvidí podle obsahu vyplnění formuláře.
<html><head></head>
<SCRIPT>
function rozhodni() { if (document.testform.kamJedeme[0].checked) {
location.href='praha.html'; } if (document.testform.kamJedeme[1].checked) {
location.href='podoli.html'; } if (document.testform.kamJedeme[2].checked) {
location.href='pr.html'; }
}
</script>
<body>
<form name=testform>
<input type=radio name=kamJedeme> Do Prahy <br>
<input type=radio name=kamJedeme> Do Podoli <br>
<input type=radio name=kamJedeme> Do ... <br>
<input type=button value="Jedem" onClick="rozhodni()">
</form>
</body></html>
V tomto příkladu jsme odstranili odesílání formuláře pomocí příkazu action v
příkazu form se action nevyskytuje. Rovněž jsme nepoužili příkaz na odeslání
submit. Místo toho jsme přidali do formuláře vstupní button a v jeho události
onClick jsme zavolali vyhodnocovací funkci, která je napsána v příkazu
<SCRIPT>. Tato funkce pojmenovaná rozhodni se opět pomocí jmen jednotlivých
elementů odkazuje na vyplněný formulář a podle jejich hodnoty provede akci
přesunu uživatele na jinou stránku.
8 0009 / pah









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.