Začínáme s webovými formuláři

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 nejl...


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 webové
stránky. V dnešním a několika dalších dílech seriálu se proto podrobně podíváme
na možnosti, které nám jazyk 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ář, který se na stránce uživateli jeví podobně jako dialogové okno, 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ň 2 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 2 možností GET a POST obě metody jsme popsali v
předešlém dílu našeho 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 přitom 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í tedy 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ích polí či pro jejich vhodné uspořádání na
stránce lze použít všechny běžné elementy. Podle potřeby lze navíc použít
následující elementy pro prvky formuláře:
lElement 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ší.
lPomocí elementu SELECT můžeme vytvořit seznamy, ze kterých lze vybírat jednu
či více položek.
lPro 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ím 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="09-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>
V obslužném skriptu 09-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 ukážeme, jak je alespoň vypsat. Skript v PHP (09-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á častým zdrojem 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 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 metody, použité při
odesílání dat.
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 heslo uživateli přes rameno. 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ílání
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.
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, to poznáme ve skriptu 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>
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í 2 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žou 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ářů.
8 1205 / pah









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.