COMPUTERWORLD
 

profil kontakt CD-ROM CW100 předplatné

archiv anketa CO VY NA TO? CW kariéra seriály
 

IDG

IDG CZ homepage
COMPUTERWORLD
PC WORLD
INTERNET4U
MEGABYTE
TESTCENTRUM
ON-LINE






COMPUTERWORLD 04/98

Formuláře na Webu

David Štrupl

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 vyvolání obslužného programu na serveru -- CGI.

CGI

Zkratka 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žnosti 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 příjmení. 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.

 

 

© IDG Czechoslovakia, a.s., Všechna práva vyhrazena
info@idg.cz, webmaster@idg.cz