Jak vytvářet www stránky - 14. díl

V dnešním díle se budeme dále věnovat formulářům a především položkám s volbami.
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ě?
Mladá Fronta DNES
Blesk
Právo
Hospodářské noviny
Lidové noviny
Další deníky


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ší?

Mladá Fronta DNES
Blesk
Právo
Hospodářské noviny
Lidové noviny
Jiný deník

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.

Váš názor Další článek: Koláče bez práce

Témata článku: Software, Programování, Deník, Hidden, Radio, Blesky, Zmrzlina, Jediný způsob, Stejné parametry, Front, Pole, Jak, Díl, Action, Textové pole, Form, Radio 1, Stejný dotaz, Stráň, Reset, Stejný prvek, Str, Software na Heureka.cz



Konec českého poskytovatele internetu v přímém přenosu. Připomíná to krachující energetické firmy
Lukáš Václavík
CETINPoskytovatelé internetuPřipojení k internetu
10 nejpovedenějších mobilů za posledních 10 let. Vzpomínáme na srdcovky, kterých jsme se nechtěli vzdát

10 nejpovedenějších mobilů za posledních 10 let. Vzpomínáme na srdcovky, kterých jsme se nechtěli vzdát

** Výrobci dnes na trh chrlí jeden telefon za druhým ** V nepřeberné šedi ale tu a tam vyčnívají mobilní perly ** Vzpomeňte s námi na telefony, které jste dlouho nechtěli odložit

Martin Chroust
LegendyHistorieSmartphony
Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

Máte rádi malé telefony? Pak si oblíbíte tohoto třípalcového drobečka, který není větší než platební karta

** Dnešní telefony se předhánějí v tom, který z nich bude větší ** Malé telefony na trhu skoro vyhynuly... ** Čínská značka si připravila telefon do dlaně s třípalcovým displejem

Martin Chroust
InfraportKompaktní velikostSmartphony
Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

Google není jen vyhledávač: 15 užitečných funkcí, o kterých možná ani nevíte

** Google umí kromě vyhledávání i spoustu dalších věcí ** Vybrali jsme více než 15 užitečných funkcí a schopností ** Stačí zadat do vyhledávače ta správná klíčová slova

Karel Kilián
TipyVyhledávačeGoogle
Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

Za WhatsApp se bude platit! Za předplatné dostanete funkci, která je u konkurence zadarmo

** Bylo to jen otázkou času ** Už i WhatsApp nabízí prémiové předplatné ** Za poplatek dostanete funkci, která je u konkurence zadarmo

Martin Chroust
předplatnéWhatsAppMobilní aplikace
Starlink překvapivě zlevňuje. I v Česku teď satelitní internet stojí o polovinu méně
Karel Kilián
StarlinkPoskytovatelé internetuPřipojení k internetu
Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

Facebook má nejspíš vaše telefonní číslo, i když jste mu ho nikdy nedali. Tímto tajným nástrojem ho můžete smazat

**Meta poskytuje nástroj na vymazání telefonních čísel a e-mailových adres z Facebooku a Instagramu **V minulosti Mark Zuckebrg popřel, že by Facebook vytvářel stínové profily **Metě teď můžete sebrat klíčové iddentifikátory, pořád o vás ale nejspíš ví mnoho dalšího

Petr Urban
MetaSledováníSociální sítě
Tuto českou základnu plnou satelitů nesmíte vidět. V Mapy.cz je každá anténa pečlivě vyretušovaná

Tuto českou základnu plnou satelitů nesmíte vidět. V Mapy.cz je každá anténa pečlivě vyretušovaná

** Zapomeňte na rozčtverečkovaná místa, kterých si každý všimne ** Mapy.cz musely dokonale zakrýt desítky parabol ** Základnou se přitom na webu chlubí i její majitel. Kocourkov

Jakub Čížek
ČeskoMapy.czMapy