Formuláře I.

Jiří Kosek ml.

V minulých dílech jsme se dozvěděli, že pro zadávání parametrů pro naše skripty jsou z uživatelského hlediska nejlepší variantou formuláře zařazené do webovské stránky. V dnešním a několika dalších dílech seriálu se proto podrobně podíváme na všechny možnosti, které nám HTML pro tvorbu formulářů nabízí. To vše doplníme popisem práce s takto zadanými parametry v PHP a ASP skriptech.

Formulář se na stránce uživateli jeví podobně jako dialogové okno. Formulář může obsahovat většinu běžně používaných prvků -- vstupní pole, tlačítka, přepínače, popisky apod.

Ke vložení formuláře do stránky slouží párový element FORM. U každého formuláře bychom měli použít alespoň dva atributy -- ACTION a METHOD. Atribut ACTION obsahuje URL-adresu skriptu, který bude obsluhovat data z formuláře -- nejčastěji se zde tedy objeví adresa některého PHP, ASP či CGI-skriptu. Atribut METHOD slouží k určení metody, kterou budou data zaslána na server. Můžeme si vybrat ze dvou možností GET a POST -- obě metody jsme popsali v předešlém díle seriálu. Pro větší formuláře bychom měli používat výhradně metodu POST. Obecně má tedy formulář následující strukturu:

<FORM ACTION="skript" METHOD="metoda">
definice jednotlivých prvků formuláře
</FORM>

Pro úplnost ještě dodejme, že formulář nemusí být nutně obsluhován jen skriptem. Některé prohlížeče umožňují obsah formuláře odeslat na zadanou e-mailovou adresu. V adrese skriptu musíme použít schéma mailto. Kostra skriptu pak vypadá takto:

<FORM ACTION="mailto:e-mail" METHOD=POST>
definice jednotlivých prvků formuláře
</FORM>

Lepší je však formuláře obsluhovat skriptem -- i kdyby měl skript jen odeslat data z formuláře na nějakou e-mailovou adresu. Skripty jsou totiž nezávislé na prohlížeči a pracují vždy správně.

Nyní se podíváme na jednotlivé prvky, které můžeme uvnitř formuláře použít. Pro vytvoření popisů jednotlivých vstupní polí či pro jejich vhodné uspořádání na stránce můžeme použít všechny běžné elementy. Podle potřeby můžeme navíc použít následující elementy pro prvky formuláře:

Element INPUT slouží pro vytvoření většiny vstupních prvků jako jsou vstupní pole, pole pro zadání hesla, zaškrtávací pole, přepínací tlačítka, tlačítka pro odeslání formuláře a další.
Pomocí elementu SELECT můžeme vytvořit seznamy, ze kterých lze vybírat jednu či více položek.
Pro vstup delších textů, které zaberou více řádek, můžeme použít element TEXTAREA.

Každý prvek formuláře musí mít své jméno určené pomocí atributu NAME. Přes toto jméno je pak obsah prvku přístupný v obslužném skriptu.

Vstupní pole

Vstupní pole slouží pro zadání krátkého textu. Pro jeho vytvoření musíme do formuláře vložit tag <INPUT> s atributem TYPE nastaveným na hodnotu TEXT. Maximální délku textu, který půjde zadat, můžeme určit pomocí atributu MAXLENGTH. Skutečnou velikost pole můžeme nastavit pomocí atributu SIZE. Posledním atributem, který můžeme použít, je VALUE. Jeho hodnota se zobrazí ve vstupní poli a slouží tak jako vodítko pro uživatele.

Použití vstupního pole jsme si ukázali již v předchozích dílech. My si nyní ukážeme, jak můžeme využít tabulky pro přehlednější zformátování formuláře. Ve formuláři navíc použijeme tlačítko pro jeho odeslání.

<FORM ACTION="08-01.php3" METHOD=GET>
<TABLE>
<TR><TD>Jméno:
    <TD><INPUT TYPE=TEXT NAME=Jmeno SIZE=30>
<TR><TD>E-mail:             
    <TD><INPUT TYPE=TEXT NAME=Email SIZE=30>
<TR><TD>Domovská stránka:   
    <TD><INPUT TYPE=TEXT NAME=Web SIZE=30 VALUE="http://">
<TR><TH COLSPAN=2>
    <INPUT TYPE=SUBMIT VALUE="Odeslání formuláře">
</TABLE>
</FORM>

Obr. 1: Zobrazení jednoduchého formuláře

V obslužném skriptu 08-01.php3 máme jednotlivá pole formuláře přístupná v proměnných $Jmeno, $Email a $Web. Můžeme s nimi nakládat dle našich potřeb -- my si prozatím ukážeme, jak je alespoň vypsat. Skript v PHP (08-01.php3):

<HTML>
<HEAD>
<TITLE>Obsluha formuláře</TITLE>
</HEAD>
<BODY>
<H1>Co nám přišlo z formuláře:</H1>
<P>Jméno: <?echo $Jmeno?>
<P>E-mail: <?echo $Email?>
<P>Web: <?echo $Web?>
</BODY>
</HTML>

Výsledek vyplnění formuláře a jeho odeslání vidíme na obrázku 2. Skript se stejnou funkčností můžeme samozřejmě zapsat i v ASP. Zde jsou jednotlivá vstupní pole přístupná pomocí kolekce Request.QueryString:

<HTML>
<HEAD>
<TITLE>Obsluha formuláře</TITLE>
</HEAD>
<BODY>
<H1>Co nám přišlo z formuláře:</H1>
<P>Jméno: <%=Request.QueryString("Jmeno")%>
<P>E-mail: <%=Request.QueryString("Email")%>
<P>Web: <%=Request.QueryString("Web")%>
</BODY>
</HTML>

Vidíme, že s PHP i ASP dosáhneme funkčně shodného výsledku -- v ASP si však trošku více opotřebujeme klávesnici.

Na tomto místě bych rád upozornil na jednu vlastnost ASP, která bývá zdrojem častým chyb. Výše uvedený skript pracuje pouze s formuláři, která svá data odesílají metodou GET. Pokud bychom ve formuláři použili metodu POST, nebude skript fungovat. Musíme jej upravit tak, aby přebíral data předaná metodou POST -- volání Request.QueryString nahradíme voláním Request.Form.

V systému PHP tyto problémy odpadají, protože pro všechny prvky formuláře jsou vytvořeny odpovídající proměnné bez ohledu na druh použité metody při odesílání dat.

Obr. 2: Výsledek obslužného skriptu

Vstupní pole pro zadání hesla

U INPUT použijeme TYPE=PASSWORD, získáme vstupní pole vhodné pro zadání hesla. Atributy můžeme použít stejné jako u obyčejného vstupního pole. Jediný rozdíl je v tom, že v tomto vstupním poli se místo uživatelem zapsaných znaků objeví hvězdičky, aby nemohl nikdo přečíst uživateli přes rameno heslo. Z tohoto důvodu je rovněž vhodné odesílat celý formulář metodou POST -- heslo se pak nezobrazí jako součást adresy skriptu v prohlížeči. I tak však není posílaní hesla zdaleka bezpečné, protože se heslo neposílá nijak zašifrované a může být během přenosu zachyceno. Skutečně bezpečně můžeme heslo posílat pouze přes spojení zabezpečené například pomocí SSL (Secure Socket Layer).

Odeslání formuláře

Každý formulář by měl obsahovat alespoň jedno tlačítko s atributem TYPE=SUBMIT. Stisk tohoto tlačítka způsobí odeslání dat z formuláře na server, který data předá příslušnému skriptu.

Text, který se objeví na tlačítku, můžeme nastavit pomocí atributu VALUE. V jednom formuláři můžeme použít i více tlačítek pro odeslání, musí však mít stejné jméno (NAME) a různý obsah atributu VALUE. Které tlačítko bylo stisknuto, pak ve skriptu poznáme podle obsahu proměnné se jménem vzniklým z atributu NAME -- proměnná bude obsahovat hodnotu atributu VALUE příslušného tlačítka. Malá ukázka (viz obr. 3):

<FORM ACTION=08-02.php3 METHOD=GET>
Souhlasíte se zněním licenční smlouvy:
<INPUT TYPE=SUBMIT NAME="Souhlas" VALUE="Ano">
<INPUT TYPE=SUBMIT NAME="Souhlas" VALUE="Ne">
</FORM>

Obr. 3: Formulář s dvěma tlačítky pro odeslání

Při obsluze tohoto formuláře budeme v PHP skriptu testovat hodnotu proměnné $Souhlas. Na základě jejího obsahu pak podnikneme příslušné akce -- v našem případě vrátíme rozdílné verze stránky. Ukázka ze skriptu 08-02.php3:

<? if ($Souhlas=="Ano"): ?>

    Gratulujeme, úspěšně jste si zaregistrovali
    náš program. Nyní si jej můžete 
    <A HREF="/inst/setup.exe">nainstalovat</A>.

<? elseif ($Souhlas=="Ne"): ?>

    Děláte chybu, když náš program nechcete. Bez
    odsouhlasení licenční smlouvy jej nezískáte.
    
<? else: ?>

    Snažíte se přelstít náš registrační systém.
    Moc se nesnažte a radši si program běžně
    zaregistrujte.

<? endif ?>

Skript by měl vždy ošetřit všechny možné stavy. První dvě větve našeho skriptu testují případy, které nastanou po odeslání formuláře. Pokud však někdo vyvolá náš skript ručně (přímým zadáním URL), nemusí proměnná $Souhlas obsahovat ani jednu z očekávaných hodnot. Tento případ jsme ošetřili v poslední větvi podmínky.

Vynulování obsahu formuláře

Tlačítko s atributem TYPE nastaveným na hodnotu RESET slouží k smazání obsahu formuláře. Po jeho stisku se smaží všechny dosud vyplněné vstupní pole a uživatel může začít vyplňovat formulář znovu. Popis tlačítka pro smazání se opět určuje pomocí atributu VALUE. Hodnota tohoto tlačítka není nikdy posílána zpět na server jako součást dat vyplněných do formuláře.

Příště bude pokračovat naše seznamování s jednotlivými vstupními prvky formulářů.