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>