XHTML – další typy elementu input

Tentokrát si povíme něco o zbývajících základních ovládacích prvcích, které lze vytvářet elementem input. Jsou jimi takzvaná zatržítka, různá tlačítka a také dva vcelku speciální prvky – skrytý prvek a prvek pro odeslání souboru.

Zatržítka – type=“checkbox“ a type=“radio“

Atributy:

checked       (checked)       #IMPLIED

Tento boolean-atribut říká, že zatržítko má být implicitně (při nahrání stránky) zatržené.

value       CDATA       #IMPLIED

Tento atribut má stejný význam jako všude jinde, ale u zatržítek uvnitř formulářů musí být vždy nastaven.

size       CDATA       #IMPLIED

Udává šířku zatržítka v pixelech.

Zatržítko se může nacházet ve dvou stavech – zatržené a nezatržené. Tím dovoluje uživateli vybrat, zda s daným údajem souhlasí či ne. Při odesílání formuláře jsou odeslána pouze jména a hodnoty zatržených prvků.

Pomocí série zatržítek se stejným jménem je možné dovolit uživateli vybrat jednu či více z nabízených možností – při odeslání formuláře jsou pak spolu se jménem zatržítka odeslány i hodnoty všech jeho zatržených instancí. V tomto ohledu se oba typy zatržítek liší, zatímco type="checkbox" umožňuje v takovém případě vybrat libovolný počet možností, type="radio" dovoluje uživateli zvolit pouze jednu z nabízených možností.

V každé sérii zatržítek type="radio" byste měli zvolit jeden prvek jako implicitně zatržený (pomocí atributu checked), v jiném případě není chování interpreta XHTML při odesílání těchto hodnot definováno.

Nyní si ukážeme pár příkladů. Nejprve vytvoříme jednoduchý dotazník:

<p>Vyberte vaše oblíbená jídla:</p>
<p><input type=“checkbox“ name=“kure“ value=“true“ /> Kuře</p>
<p><input type=“checkbox“ name=“ryba“ value=“true“ /> Ryba</p>
<p><input type=“checkbox“ name=“vepr“ value=“true“ /> Vepř</p>
<p><input type=“checkbox“ name=“mailInfo“ value=“true“ checked=“checked“ /> Souhlasím s odebíráním e-mailového magazínu o jídle.</p>

A takhle nějak to bude vypadat(zobrazení opět závisí na vašem prohlížeči):

Vyberte vaše oblíbená jídla:
Kuře
Ryba
Vepř
Souhlasím s odebíráním e-mailového magazínu o jídle.

V dalším příkladu si vytvoříme dotazník, kde již bude správně pouze jedna možnost:

<p>Jak často chodíte do divadla?</p>
<p><input type=“radio“ name=“divadlo“ value=“obcas“ /> Občas</p>
<p><input type=“radio“ name=“divadlo“ value=“2xRok“ checked=“checked“ /> Dvakrát do roka</p>
<p><input type=“radio“ name=“divadlo“ value=“casto“ /> Velmi často</p>

A výsledek:

Jak často chodíte do divadla?
Občas
Dvakrát do roka
Velmi často

Poznámka: Zde uvedené příklady postrádají správně vytvořené popisky (z pohledu XHTML). Těmi se budeme zabývat až později, proto tyto příklady nikde nepoužívejte, slouží pouze k předvedení principů zatržítek.

Tlačítka – type=“submit“, type=“reset“ a type=“button“

Atributy:

value       CDATA       #IMPLIED

Výchozí hodnota se v tomto případě zobrazuje jako text, který je uveden na tlačítku.

size       CDATA       #IMPLIED

Udává šířku tlačítka v pixelech.

name       CDATA       #IMPLIED

Tento atribut nemusíte uvádět, pokud nechcete odlišit různá odesílací tlačítka (viz dále). Použít ho ale samozřejmě můžete, potom bude mít tlačítko při odesílání formuláře stejnou roli jako ostatní ovládací prvky (odešle se jeho jméno a hodnota, ale hodnota nemůže být uživatelem změněna).

Pomocí tlačítek se provádějí s formulářem různé akce. Stisknutím tlačítka type="submit" může uživatel formulář odeslat. V jednom formuláři se může vyskytovat více tlačítek pro odeslání (pokud například chcete nechat uživatele zvolit mezi různými akcemi, které se mají s daty provést), ale součástí souboru dat odesílaného na server se stane pouze jméno a hodnota toho tlačítka, kterým uživatel formulář odeslal (proto byste v takovém případě neměli zapomenout odesílací tlačítka pojmenovat). Příklad odesílacího tlačítka:

<input type=“submit“ value=“Odeslat“ />

A výsledek v prohlížeči:

Tlačítko type="reset" umožňuje uživateli nastavit ovládací prvky formuláře na výchozí hodnoty (tedy na stav, v jakém byl formulář po nahrání stránky). Jeho jméno ani hodnota se neodesílají spolu s formulářem. Příklad:

<input type=“reset“ value=“Obnovit formulář“ />

Takto to bude vypadat v prohlížeči:

Tlačítko type="button" nemá samo o sobě žádnou funkci, tu získává až ve spojení s nějakým klientským skriptem (pomocí události onclick).

Grafická tlačítka – type=“image“

Atributy:

src       %URI;       #IMPLIED

Specifikuje URI adresu obrázku, který se má použít pro vytvoření tlačítka.

alt       %Text;       #IMPLIED

Pomocí tohoto atributu se nastavuje alternativní text pro obrázek. Pro tento text platí ta samá pravidla jako pro alternativní text u obrázků.

usemap       %URI;       #IMPLIED

Pomocí tohoto atributu lze propojit obrázek s klientskou image-mapou.

Pomocí tohoto typu ovládacího prvku je možné vytvořit tlačítko pro odeslání formuláře, které je tvořeno obrázkem. Atributy pro definici obrázku jsou obdobné jako u elementu img a k tomuto prvku se váže také všechno, co platí pro normální odesílací tlačítka.

Pokud je formulář odeslán pomocí grafického tlačítka a ukazovacího zařízení (obvykle myši), jsou s formulářem automaticky odeslány navíc dvě položky – jméno.x udávající vodorovné souřadnice od levého okraje a jméno.y udávající svislé souřadnice od horního okraje; jméno je přitom jméno tlačítka nastavené atributem name. Jedná se tedy vlastně o serverovou image-mapu.

Nyní příklad:

<input type=“image“ src=“img/tlacitko_odeslat.gif“ alt=“Odeslat“ >

Skryté ovládací prvky – type=“hidden“

Tento prvek je trochu speciální. Uživatel s ním vůbec nepřijde do styku, a tak ani nemá šanci změnit jeho hodnotu. Možná se teď ptáte, k čemu je takový ovládací prvek dobrý?

Někdy potřebujete spolu s formulářem odeslat nějaká data, které slouží pouze ke správnému chodu cílového skriptu (například uživatelské jméno nebo data, která jste od uživatele získali již dříve) a není třeba, aby je uživatel znovu nastavoval. Potom se vám skvěle hodí tento prvek.

V souvislosti s prvek type="hidden" přichází v úvahu pouze atributy name a value, proto bude příklad na jeho využití velmi jednoduchý:

<input type=“hidden“ name=“kure“ value=“false“ />

Prvek pro odeslání souboru – type=“file“

Atributy:

value       CDATA       #IMPLIED

Nastavení atributu value nemá u tohoto ovládacího prvku z bezpečnostních důvodů žádný význam, prohlížeče ho jako výchozí hodnotu nepoužijí. Je tomu tak proto, aby tvůrci stránek nemohli odeslat na server nějaký důležitý soubor z uživatelova počítače bez jeho vědomí (pomocí různě skrytých prvků pro odeslání souboru).

size       CDATA       #IMPLIED

Tento atribut udává šířku prvku v pixelech.

accept       %ContentTypes;       #IMPLIED

Tento atribut má stejný význam i syntaxi jako atribut stejného jména u elementu form. Umožňuje omezit typ souboru u konkrétního prvku.

Tento ovládací prvek umožňuje uživateli připojit k formuláři soubor, jehož obsah se spolu s ním odešle. Formulář musí být v takovém případě zakódován metodou multipart/form-data. Příklad:

<input type=“file“ name=“soubor“ accept=“text/plain“ />

A výsledek v prohlížeči:

Pokud jste příklad pozorovali ve vizuálním prohlížeči, pak jste pravděpodobně viděli i tlačítko umožňující výběr souboru. Text, který se na něm nachází, nelze prostředky XHTML ovlivnit, závisí tedy pouze na prohlížeči.

A tím jsme se probrali všemi základními ovládacími prvky, které nám nabízí element input. Příště se podíváme na elementy button a textarea.