Přepínače, zatrhávaná políčka

Dalším hodně používaným prvkem formulářů jsou bezesporu zatrhávací políčka. Ta se
používají především tam, kde stačí pouze souhlasit nebo nesouhlasit s daným tvrzením, není
potřeba nic sáhodlouze vypisovat a použít výběr (SELECT) pouze pro hodnoty ano/ne je
zbytečné.
Pro zobrazení zatržítka se používá klasická značka INPUT, pouze s jinou hodnotou para−
metru TYPE:

Toto jednoduché zatržítko má kromě klasických parametrů společných pro značku INPUT
ještě jeden specifický, CHECKED, který určuje, zda má být políčko implicitně zatrhnuto či
nikoliv. Je−li parametr přítomen, bude zaškrtnuto, jinak ne.

Zatrhnutí políčka není nevratné; pokud je jednou zaškrtnete, lze jej opět odškrtnout a naopak.
Nejlépe funkci vysvětlí následující příklad – můžeme jej zařadit třeba do jednoduchého
dotazníku:
Máte rádi maso?

Máte rádi zeleninu?

Druhým typem zaškrtávacích tlačítek je tzv. radiobutton, který podobně jako checkbox může
mít dva stavy: zaškrtnuto a nezaškrtnuto. Používá se však odlišně: jako výběr jednoho z mno−
ha. Pokud třeba chcete zjistit, v jakých mezích se pohybuje uživatelův plat, vymezíte např.
tyto hranice:
1) do deseti tisíc,
2) do patnácti tisíc,
3) do dvaceti tisíc,
4) nad dvacet tisíc.
Pokud necháte pomocí radiobuttonů tento výběr zobrazit na stránce, může pak uživatel klep−
nutím myši na kolečko zatrhnout jeden z výběrů, výběrem jiného rozmezí se původní výběr
zruší. Nelze tedy zaškrtnout více výběrů naráz.
Zeptejte, co lidé rádi jedí
Část druhá: První kroky do života stránky
43
V praxi se toho dosahuje hodnotou radio parametru TYPE značky INPUT:

Každý jeden takový řádek vytvoří jedno „kolečko“, tedy jednu možnou volbu z celého sezna−
mu. Pokud tedy je takových voleb více (např. u příkladu výběru platového zařazení), je nutné
použít odpovídající počet značek INPUT. U každé značky samozřejmě nesmí chybět parametr
NAME se stejnou hodnotou, aby prohlížeč poznal, že všechny výběry patří k sobě:

Máte plat:

do deseti tisíc,

do patnácti tisíc,

do dvaceti tisíc,

nad dvacet tisíc?


Pokud bude zdrojový text vypadat takto, nebude zatrženo zpočátku žádné kolečko. Pokud
chcete vytvořit nějaké implicitní nastavení, přidejte k některé značce INPUT parametr
CHECKED, který má stejný význam jako u zatrhávacích políček.
POZNÁMKA: Spíše než radiobuttony je však lepší využívat klasické výběry ze seznamu
(SELECT), šetří totiž místo ve formuláři a nabízí prakticky stejné možnosti. Radiobuttony se
hodí pouze tam, kde zvýší přehlednost, a není mnoho možností na výběr.
Před prvním výběrem není zaškrtnuta žádná položka
Zatržena může být vždy pouze jedna položka
Programování WWW stránek pro úplné začátečníky

Pokud chcete
nabídnout uživateli více možností, použijte raději zatrhávací políčka, tzv. checkboxy (viz dále).
Značka TEXTAREA – textové pole o větším počtu řádku
Programování WWW stránek pro úplné začátečníky
40
Část formuláře, v níž je obsažen výběr ze seznamu, může vypadat třeba takto:

Intel Pentium III
Intel Pentium II
Intel Celeron
AMD K6-III
AMD K6-2
CYRIX M2

Tento kousek kódu HTML vytvoří seznam, který můžete vidět na obrázku.
V praxi však není potřeba používat uzavírací značky , stejně jako není nutné
používat ukončovací značky u definice políček tabulky TD nebo TR. Ukončení roletkového
výběru je však nutné použít.
Dalšími zajímavými a mnohdy užitečnými parametry značky SELECT jsou:
_ SIZE="n" – Počet řádků, které jsou v roletce implicitně zobrazeny. Roletka tak má
předem danou velikost a je−li počet položek větší, vytvoří se v pravé části roletky
posuvník, kterým můžete seznamem rolovat. Z vysouvací roletky se tak vytvoří rolet−
ka se stálou velikostí. Je to vidět na obrázku, kde je vytvořena roletka s pevně daný−
mi třemi řádky, tj. SIZE="3".
_ DISABLED – Použití roletky bude zakázáno, bude zobrazená zašedlou barvou (stej−
ně jako u nepoužitelné položky v nabídce Wordu nebo Excelu).
Výběr položek (typ procesoru) ze seznamu
Roletka s pevně danými třemi řádky; její součástí je posuvník
Část druhá: První kroky do života stránky
41
I značka OPTION, která definuje jednu položku seznamu, má svoje parametry, které nemo−
hu pominout. A sice:
_ SELECTED – Hodnota takto označená je implicitně vybrána, tj. je nastavena do okna
seznamu a zbarvena tak, jako kdyby na ni uživatel klepl.
_ VALUE – Parametr VALUE předává serveru nebo skriptu jinou hodnotu, než je
zobrazena uživateli. Vidí−li uživatel v seznamu položek v roletce třeba „Automobil
Volkswagen“, obdrží server místo této hodnoty třeba jen „Volks“. Nejjednodušeji to
vysvětlí tento příklad (a také předchozí parametr, SELECTED):

Volskwagen Golf
Škoda Fabia
BMW 525 TDI
Škoda Felicia
Porsche 911 Carera

Z obrázku je patrné, že implicitně je vybraná hodnota seznamu „Škoda Fabia“, protože má ve
značce OPTION umístěn parametru SELECTED.
Ale zpět k parametru VALUE. Vybere−li ze seznamu položku „BMW 525 TDI“, je tato hod−
nota, tento celý řetězec předán skriptu nebo serveru pro zpracování. Totéž platí i pro Fabii,
Felicii a Careru. Pokud však zvolíte „Volkswagen Golf“, bude skriptu nebo serveru předána
pouze hodnota „Golf“, protože je−li přítomen parametr VALUE, má jeho hodnota přednost
a tudíž je řetězec „Volkswagen Golf“ ignorován. Parametr VALUE se tedy hodí všude tam, kde
není potřeba serveru předávat žádné dlouhé řetězce dat, navíc to mnohdy zjednodušuje zpra−
cování.

Roletky

Roletky – výběr ze seznamu
Někdy není nutné všechny hodnoty vepisovat do formulářů ručně, jsou totiž vybírány z něko−
lika přednastavených hodnot. Máte−li třeba dotaz na velikost monitoru, víte, že mohou být
pouze 14–24palcové. V tomto případě se nehodí používat klasických textových políček, ale
roletku s výběrem možných voleb. V praxi to vypadá tak, že vedle textového políčka se
objeví i malá šipka ukazující směrem dolů. Pokud na ni klepnete myší, ukáže se seznam
možných hodnot, z nichž lze jednu vybrat.
K tomu slouží značka

Následuje seznam položek, které lze ze seznamu vybrat; ty jsou definovány další značkou,
a to ve sledu, v jakém budou zobrazeny. Ty jsou uzavřeny v párové značce OPTION:
Výběr 1
Výběr 2
Výběr 3
Následuje ukončení celého seznamu:

Jde tedy o párovou značku, kde jsou jednotlivé položky voleb uzavřeny otevírající a uzavíra−
jící značkou SELECT. Zajímavým je parametrem značky SELECT je
MULTIPLE
který určuje, že půjde vybrat více položek seznamu současně (přidržením klávesy CTRL nebo
SHIFT, podle standardu Windows). V praxi se však tento parametr moc nepoužívá, seznam se
většinou používá tam, kde je možná pouze jedna položka, a mnoho uživatelů vlastně ani neví,
že může tímto způsobem vybrat položek více, pokud to není explicitně řečeno.

TYPE="password"
To, co píšete, se bude zobrazuje jako série hvězdiček. I zde je možné dodat implicitní text, ten
se také zobrazí jako hvězdičky.
1.2 Políčka o větším počtu řádků
Nestačí−li vám jednořádkové pole, můžete použít značky
TEXTAREA
Umožňuje vytvořit pole o libovolném počtu řádku. To se hodí např. tehdy, když chcete, aby
vám uživatel napsal svůj názor, vyslovil kritiku nebo naopak pochvalu. Psát delší text do jed−
nořádkového pole je totiž krajně nepřehledné. Na rozdíl od značky INPUT, která je nepárová,
je TEXTAREA značkou párovou. Mezi značkami je totiž uložen implicitní text, který bude do
textové oblasti vyplněn ještě před návštěvou stránky uživatelem.
Implicitní text
Značka TEXTAREA má podobné parametry jako jednořádkové políčko (TYPE="text">), nezadává se však typ prvku; ten je totiž přímo určen značkou. Stejně jako
u políčka má víceřádkové pole svoje jméno (NAME) a velikost. Ta se však zadává trošku jiným
způsobem – parametry
COLS="počet sloupců"
ROWS="počet řádků"
Parametr COLS je defacto shodný s parametrem SIZE u jednořádkového políčka – udává
jeho šířku (počet sloupců) ve znacích. Navíc tu je parametr ROWS, který udává výšku (počet
řádků) oblasti, opět ve znacích. Chcete−li např. textovou oblast s šířkou 30 znaků a výškou
5 znaků, napíšete do zdrojového kódu:
Text, který vepsal autor<br />stránky
Jistě jste si všimli, že při psaní textu delšího než je jeden řádek, se text automaticky zalamu−
je. To je dáno implicitním nastavením parametru
WRAP="on"
Políčko typu passwordse hodí pro zadávání hesla
Část druhá: První kroky do života stránky
39
Pokud chcete zalamování vypnout (i když, proč byste to dělali – tehdy je lepší použít kla−
sického jednořádkového políčka), zadejte jako hodnotu parametru WRAP="off".

1.1 Textová políčka
Základním prvkem formuláře je textové políčko, do něhož se vepisují požadované informa−
ce. V předchozím případě to byla například otázka na oblíbený nápoj:

Takto může vypadat jednoduchý formulář na webové stránce
Část druhá: První kroky do života stránky
37
Značkou, která políčko definuje, je tedy

Jak je patrné z překladu anglického názvu značky, jde o značku, která očekává vstup od
uživatele. Ať už je to text napsaný z klávesnice, nebo klepnutí na tlačítko. INPUT má mnoho
různých parametrů, nyní se zaměřím pouze na ty, které umožňují definovat textové políčko.
Prvním takovým parametrem je
TYPE="text"
POZNÁMKA: Parametr TYPE obecně určuje charakter, typ políčka. Může jít buď o textové
políčko, tlačítko, zaškrtávací políčko (tzv. checkbox) apod.
Políčku můžete také navolit jeho velikost, která se zadává parametrem
SIZE="délka"
Pokud nezadáte velikost políčka, bude nastavena standardní délka zhruba 20 písmen. Protože
však můžete psát do políčka text delší, než je jeho velikost, lze nastavit i maximální počet
znaků, které lze do políčka vepsat. Tohoto se dociluje parametrem
MAXLENGTH="počet slov"
Do políčka pak nelze zapsat text delší, než jste zadali. Samozřejmě že při zadávání parametru
MAXLENGTH nejste omezeni velikostí políčka, což by bylo trošku nelogické. Políčko tedy
může být klidně kratší než počet zadávaných znaků.
Zajímavým doplňkem definice textového políčka je možnost přednastavit text, který bude
v políčku vepsán již při příchodu uživatele na zadanou stránku, a sice parametrem
VALUE="přednastavený text"
Celá definice textového políčka může vypadat např. takto:

TIP: Chcete−li použít políčka např. pro nastavení hesla, kdy nechcete, aby někdo mohl text do
políčka napsaný (heslo) opsat, použijte značku INPUT s parametrem
Do textového políčka lze vložit přednastavenou hodnotu
Programování WWW stránek pro úplné začátečníky.