Formuláře II.

Jiří Kosek ml.

Dnes budeme pokračovat ve výkladů jednotlivých prvků, které můžeme používat v HTML-formulářích.

Zaškrtávací pole

Oblíbeným prvkem jsou zaškrtávací pole (checkboxes). Ty uživateli umožňují zadávání logických hodnot ano/ne. V praxi bývají zobrazeny jako čtvereček, který je možno nechat prázdný nebo jej zaškrtnout. Pokud je čtvereček zaškrtlý, pošle se jeho jméno (obsah atributu NAME) na server společně s obsahem atributu VALUE. Ve formuláři můžeme mít i několik zaškrtávacích polí se stejným jménem, která k sobě logicky patří.

Pro vložení zaškrtávacích polí se opět používá element INPUT, tentokráte však s atributem TYPE nastaveným na hodnotu CHECKBOX:

<FORM ACTION=09-01.asp METHOD=GET>
<TABLE FRAME=BORDER RULES=NONE CELLPADDING=4>
<CAPTION>Vyberte si doplňující konfiguraci počítače:
</CAPTION>
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace"
           VALUE=CD-ROM>Mechanika CD-ROM
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace"
           VALUE=ZIP>Mechanika ZIP 100MB
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace"
           VALUE=SOUND>Zvuková karta
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace"
           VALUE=MODEM>Modem US Robotic 28,8 kbit/s
<TR><TH>
    <INPUT TYPE=SUBMIT VALUE="Potvrzení konfigurace">
</TABLE>
</FORM>

Pro lepší zformátování jsme celý formulář umístili do tabulky (obr. 1).

Obr. 1: Ukázka formuláře se zaškrtávacími tlačítky

Obsluhující skript pro ASP pak může se získanými daty naložit dle potřeby. My pouze vypíšeme, jak se má počítač rozšířit (09-01.asp):

<HTML>
<HEAD>
<TITLE>Doplňková konfigurace</TITLE>
</HEAD>
<BODY>
<%
For i=1 To Request.QueryString("Konfigurace").Count
    Konf = Request.QueryString("Konfigurace")(i)
    If Konf = "CD-ROM" Then
        Response.Write "Namontuj CD-ROM!<BR>"
    ElseIf Konf = "ZIP" Then
        Response.Write "Namontuj mechaniku ZIP!<BR>"
    ElseIf Konf = "SOUND" Then
        Response.Write "Namontuj zvukovou kartu!<BR>"
    ElseIf Konf = "MODEM" Then
        Response.Write "Namontuj modem!<BR>"
    End If
Next
%>
</BODY>
</HTML>

Z formuláře může přijít více stejně pojmenovaných položek, a proto je obsluha zaškrtávacích polí trošku složitější. V našem případě již není Request.QueryString("Konfigurace") pouhou proměnnou, ale kolekcí. Kolekce je datová struktura, která může obsahovat několik položek stejného typu -- je velice podobná polím tak, jak je známe z klasických programovacích jazyků. U každé kolekce můžeme zjistit počet prvků pomocí metody Count. Náš skript tedy obsahuje cyklus, který se provede pro všechny prvky kolekce (od 1 až do Request.QueryString("Konfigurace").Count).

Jednotlivé prvky kolekce jsou přístupné pomocí svého indexu, který se zapisuje do kulatých závorek za jméno kolekce. Tímto způsobem již zjistíme konkrétní hodnotu, kterou skript obdržel od uživatele. Tu ve skriptu otestuje a provedeme příslušné akce.

V PHP se pro práci se zaškrtávacími políčky, kde jednomu jménu odpovídá více hodnot, rovněž používají pole. Aby vše správně fungovalo, je však formulář potřeba drobně upravit. Místo jména vstupního prvku NAME="Konfigurace" musíme psát NAME="Konfigurace[]", tj. přidáme na konec hranaté závorky. Pro takto pojmenovaný prvek formuláře pak PHP samo vytvoří pole. Upravený formulář:

<FORM ACTION=09-01.php3 METHOD=GET>
<TABLE FRAME=BORDER RULES=NONE CELLPADDING=4>
<CAPTION>Vyberte si doplňující konfiguraci počítače:
</CAPTION>
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace[]"
           VALUE=CD-ROM>Mechanika CD-ROM
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace[]"
           VALUE=ZIP>Mechanika ZIP 100MB
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace[]"
           VALUE=SOUND>Zvuková karta
<TR><TD>
    <INPUT TYPE=CHECKBOX NAME="Konfigurace[]"
           VALUE=MODEM>Modem US Robotic 28,8 kbit/s
<TR><TH>
    <INPUT TYPE=SUBMIT VALUE="Potvrzení konfigurace">
</TABLE>
</FORM>

V PHP počet prvků pole zjistíme pomocí funkce Count(pole). Jednotlivé prvky pole jsou přístupné pomocí indexu, který musíme zapsat do hranatých závorek. Narozdíl od VBScriptu, který je používán v ASP, jsou pole indexována od nuly. Výsledný skript 09-01.php3 v PHP tak může vypadat takto:

<HTML>
<HEAD>
<TITLE>Doplňková konfigurace</TITLE>
</HEAD>
<BODY>
<?
for ($i=0; $i<Count($Konfigurace); $i++):
    $Konf = $Konfigurace[$i];
    if ($Konf=="CD-ROM"):
        echo "Namontuj CD-ROM!<BR>";
    elseif ($Konf=="ZIP"):
        echo "Namontuj mechaniku ZIP!<BR>";
    elseif ($Konf=="SOUND"):
        echo "Namontuj zvukovou kartu!<BR>";
    elseif ($Konf=="MODEM"):
        echo "Namontuj modem!<BR>";
    endif;
endfor;
?>
</BODY>
</HTML>

Zaškrtávací pole jsou na formuláři normálně zobrazena nezaškrtnutá. Pokud chceme, aby bylo tlačítko rovnou zaškrtnuté, použijeme u něj atribut CHECKED. Malá ukázka části formuláře:

Dáte si kávu:
<BLOCKQUOTE>
<INPUT TYPE=CHECKBOX NAME=Ingredience 
       VALUE=mleko>s mlékem<BR>
<INPUT TYPE=CHECKBOX NAME=Ingredience 
       VALUE=cukr CHECKED>s cukrem
</BLOCKQUOTE>

Na obrázku 2 vidíme, že druhé tlačítko je rovnou zaškrtnuto.

Obr. 2: U druhého tlačítka je použit atribut CHECKED

Přepínací tlačítka

Přepínací tlačítka se do formuláře vkládají opět pomocí elementu INPUT, tentokráte však musíme použít atribut TYPE=RADIO. Použijeme je v případě, kdy chceme uživateli nabídnout možnost výběru jedné z několika variant. Zaškrtávací tlačítka odpovídající jednotlivým variantám musí mít nastaven atribut NAME na stejnou hodnotu. Naopak atribut VALUE musí mít každá varianta jedinečný. Část fiktivního formuláře, který slouží k výběru konfigurace počítače může vypadat i takto:

Požadovaná velikost pevného disku:
<BLOCKQUOTE>
<INPUT TYPE=RADIO NAME=HD VALUE=1200>1,2 MB<BR>
<INPUT TYPE=RADIO NAME=HD VALUE=1600 CHECKED>1,6 MB<BR>
<INPUT TYPE=RADIO NAME=HD VALUE=2100>2,1 MB<BR>
<INPUT TYPE=RADIO NAME=HD VALUE=4200>4,2 MB<BR>
<INPUT TYPE=RADIO NAME=HD VALUE=6400>6,4 MB
</BLOCKQUOTE>

Přepínací tlačítka jsme umístili mezi tagy <BLOCKQUOTE> a </BLOCKQUOTE>, aby byla odsazena vpravo. Za každou položkou formuláře je použit tag <BR>, který způsobuje přechod na novou řádku.

Obr. 3: Přepínací tlačítka v akci

Obslužnému skriptu dorazí hodnota VALUE vybraného přepínacího tlačítka. V našem případě tedy budeme mít hodnotu 1200, 1600, 2100, 4200 nebo 6400 v proměnné $HD (PHP) nebo v Request.QueryString("HD") (ASP).

Tlačítko s obrázkem

Zatím umíme formulář odeslat na server pouze pomocí tlačítka SUBMIT. Existuje však ještě jedna možnost. K odeslání může sloužit i obrázek. Pokud na něj uživatel klikne, odešle se serveru obsah formuláře společně se souřadnicemi kliknutí.

Obrázek, který slouží k odeslání formuláře se vkládá opět pomocí elementu INPUT. Jako hodnotu atributu TYPE však musíme použít IMAGE. Adresa obrázku se zadává pomocí atributu SRC. Podobně jako u obrázků můžeme použít atributy ALT pro popis obrázku a ALIGN pro určení zarovnání obrázku s okolním textem.

<FORM ACTION="skript" METHOD=GET>
<TABLE BORDER=0>
<TR VALIGN=TOP>
<TD>
    Vyberte si ukazatel:
    <BLOCKQUOTE>
    <INPUT TYPE=RADIO NAME=Ukazatel
           VALUE=Natalita CHECKED>Natalita<BR>
    <INPUT TYPE=RADIO NAME=Ukazatel
           VALUE=Mortalita>Mortalita<BR>
    <INPUT TYPE=RADIO NAME=Ukazatel
           VALUE=Rozvodovost>Rozvodovost<BR>
    <INPUT TYPE=RADIO NAME=Ukazatel
           VALUE=Obyvatelstvo>Počet obyvatel<BR>
    <INPUT TYPE=RADIO NAME=Ukazatel
           VALUE=Vek>Průměrný věk obyvatel<BR>
    </BLOCKQUOTE>
</TD>
<TD>
    Vyberte si stát:<BR>
    <INPUT TYPE=IMAGE NAME=Mapa SRC="au-mapa.gif" 
           ALT="Mapa Austrálie">
</TD>
</TR>
</TABLE>
</FORM>

V PHP budou souřadnice kliknutí myší na obrázek přístupné v proměnných $Mapa_x a $Mapa_y. Prefix před jménem souřadnice odpovídá jménu vstupního prvku určenému pomocí atributu NAME. V ASP budou souřadnice kliknutí dostupné pomocí Request.QueryString("Mapa.x") a Request.QueryString("Mapa.y").

Obr. 4: Formulář s klikací mapou

Ač to tak ani nevypadá, neměli bychom tlačítko IMAGE moc používat. Jednak je takový formulář nepoužitelný v textových prohlížečích jako je Lynx a jednak je zpracování informací o souřadnicích kliknutí v skriptu poměrně komplikované.

Příště se podíváme na další zajímavá zákoutí formulářů. Povíme si, jak pomocí formuláře odeslat na server soubor.