Jiří Kosek ml.
Formuláři jsme se zabývali i v několika předchozích dílech seriálu. Dnes na nás čekají poslední prvky formulářů, které jsme dosud neprobrali.
Seznamy
K vytvoření seznamu se používá element SELECT. Použijeme ho v případě, kdy uživateli chceme nabídnout možnost výběru jedné z několika položek. Pokud použijeme atribut MULTIPLE, může uživatel vybrat i více položek než jednu. Jméno vstupního prvku se opět určuje pomocí atributu NAME. Důležitým atributem je SIZE, který určuje počet řádek, na nichž se seznam zobrazí. Položky, které se do tohoto prostoru nevejdou, budou přístupné rolováním v seznamu.
Jednotlivé položky seznamu se zapisují pomocí elementu OPTION. Jako hodnota položky se skriptu předá text uvedený mezi tagy <OPTION> a </OPTION>. Text je však mnohdy dlouhý a nevhodný pro další zpracování skriptem. Pokud u OPTION použijeme atribut VALUE, bude se přenášet jeho obsah místo obsahu celého elementu.
Pokud má být nějaká položka vybrána již hned po zobrazení, označíme ji pomocí atributu SELECTED.
Ukončovací tag </OPTION> nemusíme ve většině případů vůbec používat -- ušetříme si tak psaní:
<FORM ACTION=11-01.php3 METHOD=GET>
Čísla časopisů, o která máte zájem:
<BLOCKQUOTE>
<SELECT NAME="Cisla[]" SIZE=6 MULTIPLE>
<OPTION>1/98
<OPTION>2/98
<OPTION>3/98
<OPTION>4/98
<OPTION>5/98
<OPTION>6/98
</SELECT>
</BLOCKQUOTE>
<P>Formát, ve kterém chcete čísla obdržet:
<SELECT NAME=Fmt SIZE=1>
<OPTION VALUE="HTML">HTML stránka
<OPTION VALUE="PDF">Portable Document Format
<OPTION VALUE="PS" SELECTED>PostScript
<OPTION VALUE="ASCII">Textový soubor
</SELECT>
<P>E-mail pro zaslání: <INPUT NAME=Email>
<P><INPUT TYPE=SUBMIT VALUE=" OK ">
</FORM>
Ve jménu prvního seznamu jsme použili hranaté závorky (Cisla[]), aby PHP pro údaje z tohoto prvku formuláře vytvořilo pole. Je to nutné, protože uživatel může vybrat více čísel časopisu najednou (díky atributu MULTIPLE).
U vstupního pole pro e-mailovou adresu jsme neuvedli typ pole. Přesto se jedná o textové vstupní pole, protože standardní hodnota atributu TYPE je TEXT.
Informace z formuláře podle potřeby zpracujeme. Následuje krátká ukázka ze skriptu 11-01.php3, která vypíše hodnoty vyplněné do formuláře:
<P>Vybrané časopisy:<BR>
<?
for ($i=0; $i<Count($Cisla); $i++):
echo $Cisla[$i]."<BR>";
endfor;
?>
<P>Požadovaný formát: <?echo $Fmt?>
<P>Zaslat na: <?echo $Email?>
Víceřádkový text
Pro vstup delších textů je určen element TEXTAREA. Jeho jméno se určuje opět pomocí atributu NAME. Kromě toho musíme pomocí atributů ROWS a COLS určit počet řádek a sloupců vstupního pole.
Při použití musíme vždy používat počáteční i ukončovací tag. Text mezi nimi se zobrazí na začátku editace ve vstupním poli.
<TEXTAREA NAME="Poznamka" ROWS=4 COLS=40>
Sem můžete vepsat další informace o objednávce.
Děkujeme
</TEXTAREA>
Formuláře na úrovni
Při vytváření webových formulářů máme poměrně velkou volnost. Snadno se tak může stát, že vytvoříme formulář, který je pro uživatele nepřehledný, nebo naopak takový, jenž je radost vyplňovat.
Vytvořit přehledný formulář, zvláště pokud má obsahovat mnoho vstupních polí, je někdy umění. I přesto existuje několik zásad, jejichž dodržování nám pomůže vytvářet pro uživatele přehledné formuláře.
Přehledný formulář má jednotlivá vstupní pole jasně označena a zarovnána přehledně pod sebou. K dosažení tohoto efektu lze využít tabulku -- první sloupec bude obsahovat popis vstupního pole a druhý samotné vstupní pole.
Celkem užitečné je uživateli napovědět v jaké formě má data do jednotlivých vstupní polí zadávat. Můžeme tedy do tabulky připojit třetí sloupec, který bude znázorňovat ukázkově vyplněná data. Druhou možností je zobrazení ukázkových dat přímo ve vstupním poli s využitím atributu VALUE. Uživatel pak pouze přepíše předpřipravené údaje.
Pro uživatele je příjemné, pokud vidí celý vyplňovaný formulář najednou na obrazovce. Pokud potřebujeme od uživatele tolik údajů, že se formulář nevejde najednou na obrazovku, je lepší vytvořit několik stránek s menšími formuláři, které postupně od uživatele vyzvědí požadované údaje.
Mnoho formulářů na Webu (např. různé registrace) vyžadují vyplnění pouze některých povinných částí formuláře. V těchto případech je vhodné povinná pole nějak odlišit -- např. použitím výraznějšího písma nebo barevného písma u popisky pole.
Pokud obsluhující skript zjistí, že uživatel nevyplnil všechny údaje, požaduje doplnění chybějících. V tomto případě by se před uživatelem měl objevit formulář s již zadanými daty. Bohužel, na mnoha stránkách se v tomto případě objeví nový prázdný formulář a uživatel musí zadávat vše znovu. My si ukážeme, jak může vypadat formulář, který vyžaduje vyplnění určitých polí, ale nabízí uživateli pohodlný způsob doplnění chybějících údajů:
<HTML>
<HEAD>
<TITLE>Ukázkový formulář</TITLE>
<STYLE TYPE="text/css">
<!--
TD B { color: red }
-->
</STYLE>
</HEAD>
<BODY>
<?
$Formular = true; // příznak zobrazování formuláře
if ($Odeslano=="true"): // Byl formulář odeslán?
if ($Jmeno=="" || // Kontrola vyplnění
$Prijmeni=="" || // povinných údajů
$Email==""):
echo "<H1>Musíte vyplnit všechny
povinné údaje!</H1>";
echo "Jsou označeny tučným červeným popisem.";
else: // Máme povinná data, zpracujeme je
$Formular = false;
// Zde se informace z formuláře zpracují
echo "<H1>Děkujeme za registraci!</H1>";
endif;
else: // Formulář je zobrazován poprvé
echo "<H1>Pro zaregistrování vyplňte tento
formulář!</H1>";
echo "Povinné údaje jsou označeny tučným
červeným popisem.";
endif;
?>
<? if ($Formular): // má se zobrazovat formulář? ?>
<FORM METHOD=POST>
<TABLE BORDER=0>
<TR>
<TD><B>Jméno:</B>
<TD><INPUT NAME=Jmeno
VALUE="<?echo $Jmeno?>" SIZE=30>
<TR>
<TD><B>Příjmení:</B>
<TD><INPUT NAME=Prijmeni
VALUE="<?echo $Prijmeni?>" SIZE=30>
<TR>
<TD>Pohlaví:
<TD><INPUT TYPE=RADIO NAME=Pohlavi VALUE="Muz"
<?echo $Pohlavi=="Muz" ? " CHECKED" : ""?>>
Muž
<INPUT TYPE=RADIO NAME=Pohlavi VALUE="Zena"
<?echo $Pohlavi=="Zena" ? " CHECKED" : ""?>>
Žena
<TR>
<TD><B>E-mail:</B>
<TD><INPUT NAME=Email
VALUE="<?echo $Email?>" SIZE=30>
<TR>
<TD>WWW stránka:
<TD><INPUT NAME=Web
VALUE="<?echo $Web?>" SIZE=30>
<TR>
<TH COLSPAN=2><INPUT TYPE=SUBMIT
VALUE=" Registrace ">
</TABLE>
<INPUT TYPE=HIDDEN NAME=Odeslano VALUE=true>
</FORM>
<? endif ?>
</BODY>
</HTML>
Celý skript si jistě zaslouží malý komentář. Výsledkem skriptu mohou být tři odlišné stránky -- viz obrázky 3-5. Pokud je skript vyvolán uživatelem poprvé, zobrazí se prázdný formulář. Pokud uživatel formulář odešle, mohou nastat dva případy. Pokud jsou všechny povinné údaje vyplněny, skript zobrazí pouze potvrzení registrace. Pokud nějaký povinný údaj chybí, zobrazí se formulář, který obsahuje již dříve vyplněná pole a požaduje doplnění chybějících polí.
Skript na obsluhu dat z formuláře volá sám sebe, a proto nemusíme u elementu FORM uvádět pomocí atributu ACTION jméno skriptu určeného pro zpracování formuláře.
Jak skript pozná, zda je uživatelem vyvolán poprvé nebo zda uživatel jen nevyplnil žádné pole? Do formuláře jsme přidali skryté pole (TYPE=HIDDEN). Toto pole se nezobrazuje, ale jeho hodnota se přenáší s ostatními údaji z formuláře. Podmínkou
if ($Odeslano=="true"):
tak snadno otestujeme, zda do skriptu již putují údaje z formuláře nebo zda je spouštěn poprvé.
V další části skriptu testujeme, zda všechna povinná pole obsahují nějakou hodnotu. Pokud ne, vypíšeme záhlaví stránky, které požaduje doplnění chybějících údajů. Pokud jsou všechna povinná pole vyplněna, poděkuje skript za vyplnění formuláře.
Další větev skriptu patří k první podmínce. Provede se pouze pokud je skript volán uživatelem poprvé a vyzve ho k vyplnění formuláře.
Následuje samotný HTML kód pro zobrazení formuláře. Tento kód se do prohlížeče odešle pouze tehdy, pokud má proměnná $Formular hodnotu true. Tato proměnná je nastavena na hodnotu false, pokud skript obdržel všechna povinná pole a my tedy již po uživateli nechceme doplnit žádné údaje.
Jako hodnotu atributu VALUE u jednotlivých vstupních polí uvádíme krátký PHP skript, který doplní obsah tohoto pole z posledního odesílaného formuláře. Tím máme zaručeno, že pokud uživatel vyplní pouze některé údaje a je požádán o doplnění chybějících povinných údajů, nemusí znovu vyplňovat zbytek formuláře. Při prvním spuštění skriptu neobsahují použité proměnné žádnou hodnotu a vstupní pole budou prázdná (viz obr. 3).
Zatímco doplnění hodnoty textového vstupního pole je jednoduché, u přepínacích tlačítek je situace poměrně složitá. Pokud má být tlačítko zaškrtnuto, je potřeba u příslušného tagu <INPUT> uvést atribut CHECKED. Použili jsme proto konstrukci:
<?echo $Pohlavi=="Muz" ? " CHECKED" : ""?>
Ta používá speciální operátor podmínka ? výraz1 : výraz2. Pokud je podmínka splněna je výsledkem výraz1, jinak výraz2. Pokud jsme tedy odeslali formulář se zaškrtnutým tlačítkem muž, vrátí skript přepínací tlačítko:
<INPUT TYPE=RADIO NAME=Pohlavi VALUE="Muz" CHECKED>
Pokud nebylo pohlaví muž vybráno, dorazí naopak:
<INPUT TYPE=RADIO NAME=Pohlavi VALUE="Muz">
a tlačítko tedy zůstane nezaškrtnuté.