Jak vytvářet www stránky - 14. díl
Formuláře - pokračování
V minulém díle jsme si ukázali několik základních prvků potřebných k vytvoření formuláře. Dnes budeme v tomto tématu pokračovat a povíme si o dalších prvcích, které je možné ve formulářích použít.
Zaškrtávací pole
Zaškrtávací pole, nebo také zatržítko, je vhodné použít zejména u dotazů, na něž může uživatel odpovědět více způsoby, nebo u dotazů, na které lze odpovědět stylem "ano" (políčko je zaškrtnuté) nebo "ne" (políčko není zaškrtnuté). Definuje se, jak již víme z minulého dílu, tagem INPUT, jehož parametr type má tentokrát hodnotu chceckbox. Využitelné jsou zejména následující atributy:
- name - název pro skupinu zaškrtávacích políček (například dotazujete-li se na oblíbenou příchuť zmrzliny, můžete pro tento účel použít název zmrzlina). Všechna políčka patřící do stejné skupiny musí mít hodnotu parametru name stejnou!
- value - hodnota, která je předána skriptu v případě, že uživatel políčko "zaškrtne" (zůstaneme-li u našeho příkladu se zmrzlinou, vložíte do parametru value například hodnoty jahodova, cokoladova, vanilkova atp.). V případě, že formulář bude odesílán elektronickou poštou, obdrží příjemce jako výsledky všechna zaškrtnutá políčka ve formátu name=value.
- checked - uvedení tohoto parametru určuje, že vybrané políčko bude při načtení formuláře implicitně "zaškrtnuté", což je vhodné zejména v případech, kdy předpokládáte, že většina uživatelů toto políčko "zaškrtne" (například pokud budete předpokládat, že většina lidí má ráda čokoládovou zmrzlinu, použijete tag <INPUT type="checkbox" name="zmrzlina" value="cokoladova" checked>).
- align - zarovnání políčka na stránce (shodné jako u předcházejících tagů, tedy left, right nebo center).
Ukažme si tedy, jak vytvořit jednoduchý formulář, jehož účelem bude zjistit, jaké deníky čtou návštěvníci našich stránek:
<B>Které deníky čtete pravidelně?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post>
<INPUT type="checkbox" name="deniky" value="mladafronta" chcecked>Mladá Fronta DNES<BR>
<INPUT type="checkbox" name="deniky" value="blesk">Blesk<BR>
<INPUT type="checkbox" name="deniky" value="pravo">Právo<BR>
<INPUT type="checkbox" name="deniky" value="hn">Hospodářské noviny<BR>
<INPUT type="checkbox" name="deniky" value="ln">Lidové noviny<BR>
<INPUT type="checkbox" name="deniky" value="dalsi">Další deníky<BR>
<INPUT type="submit" value="Odešli data!"><INPUT type="reset" value="Smaž formulář!"> <BR>
</FORM>
Výsledek pak bude vypadat následovně:
Které deníky čtete pravidelně?
Přepínací pole
Přepínací pole nebo "radio-button". Původní anglický název tohoto formulářového prvku vzešel z principu starých rádií, kde byla tlačítka pro přepínání vlnových délek, přičemž nikdy nebylo možné mít stisknuté více než jedno tlačítko (v případě, že jste stiskli jiné, to předchozí "vyskočilo"). Přesně tak fungují přepínací pole ve formulářích - nikdy nelze zvolit více než jednu jedinou odpověď, takže se tyto prvky hodí zejména pro otázky typu "co je nejlepší..." a jistě sami najdete řadu dalších uplatnění. Syntaxe je shodná se zaškrtávacími políčky, liší se pouze v tom, že parametr type má hodnotu radio. Nebudeme tedy podrobně rozebírat jak tento tag zapsat a podíváme se rovnou na příklad.
<B>Který deník považujete za nejlepší?</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post>
<INPUT type="radio" name="deniky" value="mladafronta" chcecked>Mladá Fronta DNES<BR>
<INPUT type="radio" name="deniky" value="blesk">Blesk<BR>
<INPUT type="radio" name="deniky" value="pravo">Právo<BR>
<INPUT type="radio" name="deniky" value="hn">Hospodářské noviny<BR>
<INPUT type="radio" name="deniky" value="ln">Lidové noviny<BR>
<INPUT type="radio" name="deniky" value="dalsi">Jiný deník<BR>
<INPUT type="submit" value="Odešli data!"><INPUT type="reset" value="Smaž formulář!"><BR>
</FORM>
Všimněte si, že nelze aktivovat více než jednu položku
Který deník považujete za nejlepší?
V dokumentu lze definovat více skupin přepínacích polí, vždy si ale dávejte pozor na název - tlačítka se stejnou hodnotou parametru name se vzájemně ovlivňují a jak jsem uvedl výše, není možné, aby bylo aktivní více než jedno. Při použití více skupin (například budete-li mít více otázek, na které chcete nabídnout jen jedinou odpověď) je nutné, aby každá skupina měla svůj vlastní název, tedy name.
Skrytý prvek
Skrytý prvek vám umožňuje odesílat ke zpracování data, která nejsou viditelná a nevyplňuje je uživatel (například máte-li více formulářů, lze do tohoto prvku zadat název formuláře, který uživatel vyplnil). Parametr type má hodnotu hidden, atributy jsou tentokrát důležité jen dva: name, kam zadáte název pole a value, kam zadáte hodnotu (například <INPUT type="hidden" name="typ_formulare" value="osobní_dotaznik">.
Textové pole s definovanou velikostí
Minule jsme si ukázali, jak vytvořit textové pole pomocí parametru type=text. Tento způsob umožňuje vytvářet pole pouze o jediném řádku, což nemusí vždy postačovat. Pokud například chcete, aby vám uživatelé mohli psát vzkazy, bude vhodnější vytvořit pro tyto účely větší prostor. K tomu slouží párový element TEXTAREA, který má následující parametry:
- cols - šířka oblasti zadávaná v počtu znaků
- rows - výška oblasti zadávaná v počtu řádek
- wrap - způsob zalamování zapsaného textu. Hodnota off znamená, že se text nezalamuje, hodnota virtual že se text zalamuje pouze na obrazovce, ovšem odeslán je jako jediný řádek a konečně hodnota physical znamená, že se text zalamuje a odesílá se včetně znaků zalomení řádku.
<B>Vzkaz pro autora stránek:</B><BR>
<FORM ENCTYPE="text/plain" ACTION="mailto:adresa@server.cz" method=post><BR>
<TEXTAREA cols=40 rows=4 wrap="virtual"></TEXTAREA><BR>
<INPUT type="submit" value="Odešli vzkaz!"><INPUT type="reset" value="Smaž vzkaz!"><BR>
</FORM>
a v praxi to vypadá následovně:
Vzkaz pro autora stránek:
Pro dnešek si dáme pohov, ale za týden budeme ve formulářích pokračovat. Do té doby si zkuste vytvořit formulář, do kterého umístíte všechny prvky, které jsme se zatím naučili, to je textové pole, pole pro zadání hesla, zaškrtávací pole, přepínací pole, skryté prvky a textové pole s více řádky.
|
