Jak vytvářet www stránky - 15. díl
Formuláře - 2. pokračování
Minulé dva díly jsme věnovali formulářům a nejinak tomu bude i tentokrát. V tomto již patnáctém pokračování se podíváme na další prvky, které lze umístit do formuláře a na závěr vás čeká lahůdka, díky níž budou moci návštěvníci vašich stránek vyhledávat v českém Internetu pomocí jednoho ze tří největších vyhledávacích serverů. Příští týden bude trošku oddychový, protože si ukážeme několik tipů a triků, ale na to si budete muset ještě sedm dnů počkat. Takže hurá na formuláře!
Roletková menu a seznamy
K vytváření roletkových menu a seznamů slouží element SELECT, jednotlivé volby pak uvozujeme tagem OPTION, který můžeme ale nemusíme uzavírat. Zjednodušeně vypadá struktura takového menu následovně:
<SELECT parametry>
<OPTION parametry>možnost číslo 1
<OPTION parametry>možnost číslo 2
<OPTION parametry>možnost číslo 3
.
.
.
<OPTION parametry>možnost číslo x
</SELECT>
Tag SELECT může mít následující parametry:
- name - označení formulářového prvku, které je velmi důležité a nesmí se v jednom formuláři vyskytovat více než jednou. Pokud vytváříte formulář, jehož výsledky budou odesílány elektronickou poštou, dostanete výsledky ve tvaru jméno formulářového prvku=vybraná hodnota tedy name=value (k vybrané hodnotě se dostaneme o něco níže ve výkladu tagu OPTION).
- size - určuje, kolik položek bude současně zobrazeno. U klasického roletkového menu je nastavujeme parametr size na jedničku. Ostatní nabízené možnosti se zobrazí až při rozbalení menu.
- multiple - tento parametr nemá žádnou hodnotu. Jeho uvedení v tagu SELECT znamená, že uživatel může z nabídky vybrat více než jednu hodnotu. Více položek může uživatel vybrat použitím klávesy Ctrl nebo Shift při kliknutí myší na vybranou položku (podobným způsobem se vybírají soubory v Průzkumníkovi).
U tagu OPTION jsou pak důležité dva parametry:
- selected - uvedení tohoto parametru u některé položky znamená, že položka bude implicitně označená jako vybraná.
- value - označení vybrané hodnoty. Jak jsme již uvedli u tagu SELECT, je tento parametr důležitý zejména pro další zpracování formuláře.
Uvedeme si jednoduchý příklad:
Chceme vytvořit formulář, jehož účelem by mělo být zjištění nejoblíbenější příchuti zmrzliny. Použijeme k tomu roletkové menu: prvek pojmenujeme zmrzlina (tedy name="zmrzlina"), necháme zobrazovat vždy pouze jednu položku (size=1) a nedáme možnost výběru více než jedné položky (neuvedeme tedy parametr multiple). Budeme předpokládat, že nejvíce lidí má rádo čokoládovou zmrzlinu, proto tuto hodnotu vybereme jako přednastavenou (u položky s čokoládovou zmrzlinou uvedeme v tagu OPTION parametr selected). Pochopitelně nezapomeneme ani na tlačítko k odeslání formuláře. Celé dílko tedy bude vypadat následovně:
<FORM name="test" ENCTYPE="text/plain" ACTION="mailto:jmeno@server.cz">
<B>Jakou zmrzlinu máte nejraději?</B><BR>
<SELECT name="zmrzlina" size=1>
<OPTION name="citronova">Citrónovou
<OPTION name="jahodova">Jahodovou
<OPTION name="cokoladova" selected>Čokoládovou
<OPTION name="vanilkova">Vanilkovou
<OPTION name="pistaciova">Pistáciovou
<OPTION name="kavova">Kávovou
<OPTION name="jiná">Jinou
</SELECT>
<INPUT type="submit" value="Odešli data">
</FORM>
A výsledek vypadá následovně:
Obrázek místo tlačítka
Možná jste si všimli, že na některých serverech se k odeslání dat nebo požadavku nepoužívá šedivé obdélníkové tlačítko, které nemusí vždy vyhovovat vašemu estetickému cítění ani celkovému designu stránky. Namísto něj lze použít obrázek (nebo libovolný grafický prvek), ovšem dávejte bedlivý pozor, aby bylo na první pohled jasné, že tento obrázek slouží k odeslání dat. Grafického tlačítka docílíte pomocí již dobře známého tagu INPUT s parametrem type=image, obrázek, který chcete použít místo tlačítka, pak určíte parametrem src=adresa obrázku. Pokud zůstaneme u předchozího příkladu, bude stačit pouze zaměnit předposlední řádek, který by například mohl vypadat takto:
<INPUT type="image" src="obrazek.gif">
Vyhledávání v českých vyhledávačích
Chcete-li umožnit návštěvníkům vašich stránek vyhledávání přes některý vyhledávač, můžete to provést snadno tak, že vytvoříte formulář, který bude odesílán příslušnému serveru. Proto v tagu FORM do parametru action zadáme adresu skriptu, který má na starosti zpracování dotazu. Stručně si ukážeme, jak lze vyhledávat pomocí Seznamu, Atlasu a Centra. Modře označený text je pouze orientační komentář, který do svých stránek nevkládejte.
Seznam
<FORM method="get" action="http://www.seznam.cz//hledej.cgi"> zde se určuje adresa skriptu a způsob odeslání
<INPUT type="hidden" name="typ" value="or"> skrytý prvek zajišťující pomocný parametr pro vyhledávání
<INPUT size="30" name="string"> textové políčko pro zadání hledaného výrazu
<INPUT type="submit" value="Odeslat!"> odesílací tlačítko
</FORM> ukončení formuláře
Atlas
<FORM action="http://www.atlas.cz/resultp.asp" method="get"> adresa skriptu a způsob odeslání
<INPUT type="hidden" name="ct" value="cri"> skrytý prvek obsahující pomocný parametr
<INPUT type="hidden" name="so" value="rank[d], DocTitle"> další skrytý prvek obsahující pomocný parametr
Kde chcete hledat:
<SELECT name="kde" size="1"> roletkové menu umožňující volbu způsobu vyhledávání
<OPTION value="f" selected>v českém Internetu</option> první položka roletkového menu
<OPTION value="k">v katalogu stránek</option> druhá položka roletkového menu
</SELECT><BR>
<INPUT type="text" size="30" maxlength="200" name="qu"> textové políčko pro zadání hledaného výrazu
<input TYPE="submit" VALUE="Odeslat!" name="hledej"> odesílací tlačítko
</FORM> ukončení formuláře
Centrum
<FORM name="hledani" action="http://fulltext.centrum.cz/search.php" method="get">
Kde chcete hledat:
<SELECT name="sec">
<OPTION value="kat">v Centru
<OPTION value="all">ve fulltextu
<OPTION value="obch">v obchodech
</SELECT><BR>
<INPUT type=hidden name="go" value="1">
<INPUT type=hidden name="typ" value="std">
<INPUT type=hidden name="disp" value="nor">
<INPUT type="text" name="q" size="30">
<INPUT type="submit" value="Odeslat!">
</FORM>
Komentář snad není potřeba - pouze pro orientaci obsahuje tento formulář roletkové menu se třemi položkami a tři skryté parametry.
Jak pracuje odesílání formulářů metodou get můžete dobře poznat právě u těchto formulářů. Stačí, když si vytvoříte jednoduchou stránku s některým z vyhledávačů, zadáte do textového políčka hledaný termín, nastavíte parametry a odešlete dotaz. Pak se stačí pouze podívat do adresního řádku prohlížeče kde během chvilky najdete všechny proměnné i jejich hodnoty.
To je pro tento týden vše. Zkuste si pomocí formuláře vytvořit nějakou anketu pro své stránky, případně se můžete pokusit vytvořit formuláře i pro další české a světové vyhledávací servery. Příští týden se těším u dalšího dílu zase nashledanou.
|
