HTML (X.)
Formuláře III.

      Dnes nás čeká dokončení nejsložitějších postupů tvorby stránek, ke kterým jednoznačně patří formuláře.

      Kapitola XVI. - Uzavření formulářů

      Formuláře dnes stále více nahrazují dříve hojně rozšířený způsob zadávání formulářů pomocí příkazu <ISINDEX>. Ten si tady popisovat nebudeme, ale pro snazší pochopení významu formulářů si povíme alespoň toto: tento příkaz pracoval tak, že automaticky spustil CGI skript, který vykreslil formulář, ten posléze uživatel vyplnil a odeslal. Poté ten samý skript odeslaný formulář zpracoval a obstaral též výsledek.

      "Nový" způsob pracuje tak, že formulář je HTML stránka, z níž se odešlou data CGI-skriptu. Ten pak vrátí výsledek jako další HTML stránku. Tento postup je mnohem jednodušší a rychlejší. Ale nyní již zpátky k formulářům.

      Odeslání výsledku

      Obvykle se formulářů využívá ve spojení s CGI-skripty, avšak není to jediný způsob, jak s daty z formulářů pracovat.

      Poté, co potvrdíte tlačítkem nebo klávesou odeslání formuláře, jsou data zakódována do jednořádkové podoby, ve které je uvedeno nejen jméno každého objektu, ale také jeho hodnota. Mezery a některé speciální znaky jsou nahrazeny posloupností písmen a číslic. Tato data musí rozkódovat příslušný proces, zpracovávající formulář.

      Nejprve musíme specifikovat, jak budou data odeslána. Existují dvě možnosti: GET a POST. GET získává data podobně, jako příkaz <ISINDEX>. Příkaz POST předává data přímo, bez proměnných a argumentů.

      Zde je ukázka formuláře pracujícího s metodou GET.

<FORM NAME="wcsearchform" ACTION="/cgi-bin/WebQuery" METHOD="GET">
<INPUT TYPE="text" NAME="searchText" SIZE="30"><INPUT TYPE="submit" VALUE="Hledat">
</FORM>

      Povšimněte si, že se odesílá objektem typu SUBMIT (potvrdit), což je vlastně tlačítko právě s funkcí potvrzení formuláře - jak budou data potvrzena a adresu CGI-skriptu, nám říká záhlaví formuláře (probírali jsme to ve XIV. kapitole).

      Zde je obdobný pokus s metodou POST:

<FORM method=post action="http://www.yahoo.com/cgi-bin/Four11Main">


<INPUT type=text name="FirstName" size=18 value="">


<INPUT type="submit" name="search" value="Hledat">


<INPUT type=reset value="Smazat">


</FORM>

      Dobrá, to bychom měli odeslání CGI-skriptu. Kromě toho můžete využít i dalších možností: například odeslání formuláře na danou adresu elektronické pošty. Po odeslání obdrží adresát trochu zkomolený dopis s textem a nastavením podle formuláře. Zde je jeho příklad:

<FORM method=post action="mailto:info@q-system.cz">


<INPUT type=text name="zprava" size=18 value="">


<INPUT type="submit" name="odeslat" value="Poslat zpravu">


</FORM>

      Velkou výhodou je, že nepotřebujete žádný skript a můžete tento formulář umístit na vaše stránky například v roli jakési návštěvní knihy. Došlá zpráva do schránky může vypadat například takto:

      zprava=Ahojte+lidi+zdravim+vas+vsechny.

      Poslední možností, jak přesměrovat formulář, kterou si dnes popíšeme, je využití dat v Javě nebo JavaSkriptu. Tyto aplikace rovněž mohou být umístěné přímo na stránce, a nebudete tedy potřebovat žádný skript uložený na serveru. Používá se jednoduše: do kolonky pro způsob zpracování napíšete metodu, která bude na formulář reagovat. Zde je výpis javascriptové aplikace a následně i formuláře, který si zažádá o příkaz. Po odeslání je javascriptovou aplikací příkaz vyhodnocen a podle něj je nahrána nová webová stránka s adresou uvedenou ve skriptu. Všimněte si, že JavaScript nepotřebuje data rozkódovávat, neboť je přečte přímo z proměnných každého objektu, v našem případě z textového pole: thisform.prompt.value.

      <SCRIPT LANGUAGE="JavaScript">


var well="";


var comm="";


function checkform(thisform){


comm=thisform.prompt.value;


// zde jsou možné příkazy:


if(comm=="AltaVista") well="http://www.altavista.digital.com";


if(comm=="IDG") well="http://www.idg.cz";


if(well==""){


alert("Prikaz je neplatny.");


thisform.prompt.focus();


thisform.prompt.select();


return false;


}


else {


window.open(well,target="body");


}


return false;


}


</SCRIPT>


<FORM METHOD="POST" ACTION="noindex.htm" onSubmit="return checkform(this)">


<INPUT TYPE="text" SIZE="35" MAXLENGTH="256" NAME="prompt"><INPUT TYPE="submit" NAME="poslat" VALUE="Spustit">


</FORM>

      Znovuobnovení formuláře

      Již jsme si řekli, že tlačítko typu Submit má význam potvrzovacího objektu pro odeslání formuláře. Pokud chcete na vaši stránku umístit tlačítko, které na stlačení uvede formulář do výchozího stavu, je to obdobně jednoduché: vložíte objekt typu RESET:

      <INPUT type=reset value="Smazat">

      Tento příkaz vytvoří tlačítko mazající formulář s nápisem "Smazat".

      Co dále?

      Možností práce s formuláři je pochopitelně mnohem více, zde jsme si uvedli jen nejběžnější způsoby. Pokud budete mít zapotřebí využívat formuláře důkladněji, více informací se dozvíte v příručce programátora k vašemu webovému serveru.

      Výpis představuje kompletní stránku s formulářem zpracovaným JavaScriptem.

      (příště - rámce)

     

Bedřich Smetana

           
      <HTML>


<HEAD>


<TITLE>Kapitola XVI.</TITLE>


<SCRIPT LANGUAGE="JavaScript">


var well="";


var comm="";


function checkform(thisform){


comm=thisform.prompt.value;


if(comm=="AltaVista") well="http://www.altavista.digital.com";


if(comm=="IDG") well="http://www.idg.cz";


if(comm=="Mamedia") well="http://www.mamedia.cz";


if(comm=="SGI") well="http://www.sgi.com";


if(well==""){


alert("Prikaz je neplatny.");


thisform.prompt.focus();


thisform.prompt.select();


return false;


}


else {


window.open(well,target="_top");


}


return false;


}

</SCRIPT>

</HEAD>

      <BODY TEXT="#000000" BGCOLOR="#C0C0C0" LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#FFFF00">


<CENTER><TABLE BGCOLOR="#808080" >


<TR>


<TD>


<H1>Přístup k nejoblíbenějším stránkám</H1>


</TD>


</TR>


<TR>


<TD ALIGN=CENTER VALIGN=CENTER>


<FORM METHOD="POST" ACTION="noindex.htm" onSubmit="return checkform(this)">Příkaz


<INPUT TYPE="text" SIZE="35" MAXLENGTH="256" NAME="prompt"><INPUT TYPE="submit" NAME="poslat" VALUE="Spustit"> <B><FONT SIZE=+2><A HREF="help.htm">?</A></FONT></B>


</FORM></TD>


</TR>


</TABLE></CENTER>


</BODY>


</HTML>