Formuláře IV.

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 chceme uživateli 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 kterých 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.

Obr. 1: Ukázka formuláře se seznamy

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>

Obr. 2: Vstupní pole pro víceřádkový text

Formuláře na úrovni

Při vytváření webovských formulářů máme poměrně velkou volnost. Není tak problém vytvořit formulář, který je pro uživatele nepřehledný, nebo naopak formulář, který 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ž&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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 zajistí jistě 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 jen uživatel 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, 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é.

Obr. 3: Formulář při prvním načtení

Obr. 4: Zapomněli jsme vyplnit e-mailovou adresu

Obr. 5: Vše je v pořádku -- jsme zaregistrováni