XHTML – vysunovací nabídky

9. června 2003

•

Martin Snížek

V dnešním článku ze série o XHTML si ukážeme další ovládací prvek formuláře, vysunovací nabídku.

Element select – ohraničení vysunovací nabídky

Povolený obsah: (optgroup|option)+

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
name CDATA #IMPLIED: Udává jméno vysunovací nabídky.
size CDATA #IMPLIED: Specifikuje počet položek, které budou viditelné bez nutnosti skrolování nabídkou. Pokud není zadán, je obvykle viditelná jedna položka, což ale není závazné, interpretace nabídky závisí plně na interpretovi XHTML.
multiple (multiple) #IMPLIED: Tento atribut říká, že může být najednou vybráno více položek. Pokud není nastaven, smí být vybrána pouze jedna.
disabled (disabled) #IMPLIED: Umožňuje nabídku „vyřadit“. Význam tohoto atributu je stejný u všech ovládacích prvků.
onchange %Script; #IMPLIED: Tato událost je aktivována, pokud uživatel změnil hodnotu nabídky. Dojde k tomu ve chvíli, kdy prvek ztratí fokus (de-facto se jedná o událost onblur, přičemž navíc musí dojít ke změně hodnoty ovládacího prvku).
tabindex %Number; #IMPLIED: Pomocí tohoto atributu můžete změnit pořádek procházení dokumentu klávesnicí. Jeho popisu jsme se již věnovali v části o odkazech.
onfocus %Script; #IMPLIED: Tato událost je aktivována, když daná vysunovací nabídka obdrží fokus (tj. je na ni zaměřen kurzor při navigaci klávesou Tab nebo je aktivována ukazovacím zařízením).
onblur %Script; #IMPLIED: Tato událost je aktivována ve chvíli, kdy nabídka ztratí fokus, jedná se o protiklad onfocus.

Element select v XHTML 1.0 Strict DTD

Element select ohraničuje vysunovací nabídku. Jeho obsahem jsou jednotlivé položky, každá reprezentovaná jedním elementem option. Ty se mohou navíc sdružovat do menších skupin pomocí elementu optgroup.

Element option – položky nabídky

Povolený obsah: (#PCDATA)

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
selected (selected) #IMPLIED: Tento boolean-atribut říká, že daná položka má být implicitně (po nahrání stránky) vybrána. V každé nabídce by měla být alespoň jedna taková položka, pokud není, může se chování interpretů XHTML lišit, protože specifikace v tomto případě chování nedefinuje. Pokud nabídka má nastaven atribut multiple, může být implicitně vybraných i více položek.
disabled (disabled) #IMPLIED: Umožňuje položku „vyřadit“. Význam tohoto atributu je stejný u všech ovládacích prvků.
value CDATA #IMPLIED: Pomocí tohoto atributu se definuje hodnota, která je s danou položkou spojena. Při odeslání formuláře se z nabídky posílá jméno elementu select spolu s hodnotami položek, které jsou v něm vybrány. Pokud atribut value nenastavíte, stane se hodnotou položky její textový obsah.
label %Text; #IMPLIED: Pokud se položka nachází uvnitř nějaké skupiny položek (definované elementem optgroup) a má tento atribut nastaven, použije se jeho hodnota jako popis položky. K významu tohoto atributu se ještě dostaneme.

Element option v XHTML 1.0 Strict DTD

Každý element option reprezentuje jednu položku vysunovací nabídky. Jeho obsah se použije jako popisek dané položky. Nyní příklad:

<select name=“OS“>
<option selected=“selected“ value=“0″>Vyberte OS</option>
<option value=“W98″>Windows 98</option>
<option value=“W2000″>Windows 2000</option>
<option value=“WXP“>Windows XP</option>
<option>OS 2</option>
<option value=“Mac“>Mac OS</option>
<option value=“SuSE“>SuSE Linux</option>
<option value=“Red Hat“>Red Hat Linux</option>
</select>

A přibližně takový bude výsledek v prohlížeči:

Všimněte si, že jsme vytvořili jednu položku, která má pouze informativní charakter, říká uživateli, co má dělat. Tu jsme také zvolili jako implicitně vybranou. Když uživatel vybere například položku „Windows 2000“, při odeslání formuláře se bude posílat jméno nabídky („OS“) spolu s hodnotou vybrané položky, tedy „W2000“. Pouze v případě vybrání OS 2 by se odeslal text elementu („OS 2“), protože tato položka nemá přiřazen atribut value.

Nyní povolíme zobrazení více položek najednou a uživatele necháme vybrat více než jednu položku:

<select name=“OS“ size=“3″ multiple=“multiple“>
<option selected=“selected“ value=“0″>Vyberte OS</option>
<option value=“W98″>Windows 98</option>
<option value=“W2000″>Windows 2000</option>
<option value=“WXP“>Windows XP</option>
<option>OS 2</option>
<option value=“Mac“>Mac OS</option>
<option value=“SuSE“>SuSE Linux</option>
<option value=“Red Hat“>Red Hat Linux</option>
</select>

A výsledek:

Měli byste si ale dávat pozor na jednu věc. To, že lze vybrat více položek najednou, nemusí být zřejmé, navíc mnoho uživatelů neví, jak takový úkon provést (například ve Windows je třeba držet klávesu Ctrl). Proto je třeba uživatele informovat o tom, že lze vybrat více položek a případně mu poskytnou i návod, jak na to.

Element optgroup – skupiny položek

Povolený obsah: (option)+

Atributy:

%attrs;: Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
disabled (disabled) #IMPLIED: Umožňuje položku „vyřadit“. Význam tohoto atributu je stejný u všech ovládacích prvků.
label %Text; #REQUIRED: Tento povinný atribut určuje popisek skupiny položek.

Element optgroup v XHTML 1.0 Strict DTD

Někdy se dostanete do situace, kdy je již vaše vysunovací nabídka příliš složitá nebo obsahuje podobné položky. V takovém případě je ideální chvíle začlenit položky do určitých skupin, které pomohou uživateli zorientovat se.

Skupiny uvnitř nabídky se vytváří právě pomocí elementu optgroup. Každý element optgroup se musí nacházet přímo v elementu select, skupiny tedy není možné do sebe vnořovat.

Zobrazení takové nabídky opět záleží na prohlížeči, může například vytvořit hierarchické menu nebo vypíchnout názvy jednotlivých skupin v nabídce. Opět si ukážeme příklad:

<select name=“OS“>
<option selected=“selected“ value=“0″>Vyberte OS</option>
<optgroup label=“Windows“>
  <option value=“W98″ label=“98″>Windows 98</option>
  <option value=“W2000″ label=“2000″>Windows 2000</option>
  <option value=“WXP“ label=“XP“>Windows XP</option>
</optgroup>
<optgroup label=“Linux“>
  <option value=“SuSE“ label=“SuSE“>SuSE Linux</option>
  <option value=“Red Hat“ label=“Red Hat“>Red Hat Linux</option>
</optgroup>
<optgroup label=“Jiné“>
  <option>OS 2</option>
  <option value=“Mac“>Mac OS</option>
</optgroup>
</select>

A takto zobrazí nabídku váš prohlížeč:

Pomocí atributu label elementu optgroup se nastavuje jméno skupiny. Atribut label elementu option se používá pro nastavení popisku položky, pokud je nabídka interpretována jako hierarchické menu. Pokud by uživatel zvolil v první úrovni „Windows“, nebylo by logické, aby se v dalším podmenu vyskytovaly popisky „Windows 98“, „Windows 2000“ atd. Naopak stačí pouze „98“, „2000“, protože „Windows“ už uživatel vybral.

Tento popisek nijak neovlivňuje hodnotu položky, ta je stále určena atributem value nebo obsahem daného elementu option.

A tím jsme se probrali i posledním ovládacím prvkem formulářů. Příště se budeme zabývat logickou strukturou formulářů.