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.
