Jiří Kosek ml.
Dnes budeme pokračovat ve výkladu 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).
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í poněkud 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, jaké 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. Na rozdí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>
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.
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 1 200, 1 600, 2 100, 4 200 nebo 6 400 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").
Ač to tak ani nevypadá, neměli bychom tlačítko IMAGE příliš 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 také, jak pomocí formuláře odeslat na server soubor.