Interval.cz > Webdesign > XHTML > XHTML - struktura formulářů

XHTML - struktura formulářů

16. 06. 2003 | Martin Snížek | XHTML | Komentáře: 3

V dnešním díle si zavedeme do formulářů trochu jasnější strukturu – představíme si elementy label, fieldset a legend.

Element label – popisky ovládacích prvků

Povolený obsah: %Inline;

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).

for       IDREF       #IMPLIED

Tento atribut definuje, pro jaký ovládací prvek je daný element label popiskem. Jeho hodnotou musí být jméno nějakého ovládacího prvku z dokumentu, reprezentované atributem id. Pokud není tento atribut nastaven, je daný label popiskem pro ten ovládací prvek, který se uvnitř něho nachází.

accesskey       %Character;       #IMPLIED

Tento atribut se používá k nastavení zkratkové klávesy pro přístup k danému popisku; uživatel si pak může vybrat, zda přistoupí k ovládacímu prvku, s kterým je popisek spoután. Atributem accesskey jsme se již blíže zabývali v části o odkazech.

onfocus       %Script;       #IMPLIED

Tato událost je aktivována, když popisek obdrží fokus.

onblur       %Script;       #IMPLIED

Tato událost je aktivována ve chvíli, kdy popisek ztratí fokus, jedná se o protiklad onfocus.

Element label v XHTML 1.0 Strict DTD

U většiny ovládacích prvků je třeba jistý doprovodný text, který informuje uživatele o tom, k čemu je daný prvek určen. Pokud se na stránku díváte pomocí vizuálního prohlížeče a na velkém monitoru, poznáte snadno, k jakému prvku jaký popisek patří. Na jiných počítačích (např. PDA s malou obrazovkou) nebo v nevizuálních prohlížečích to již ale tak jasné být nemusí, proto je třeba popisek nějak označit a připojit ho k ovládacímu prvku.

A právě k tomu slouží element label. Jeho obsahem je text popisku a jakékoliv elementy pro vyznačování textu (což vyplývá z parametrické entity %Inline;). Ovládací prvek, ke kterému popisek náleží, je buď součástí obsahu label (v takovém případě ale nesmí být uvnitř tohoto labelu ovládacích prvků více) nebo je mimo label a je na něj „odkazováno“ pomocí atributu for elementu label.

Kromě toho, že pomocí elementů label zpřístupníte stránku pro méně obvyklé prohlížeče, získáte také lepší strukturu formuláře, čehož můžete snadno využít např. ve stylech k dosažení hezčího vzhledu formuláře. Ve vizuálních prohlížečích je navíc obvykle možné přistupovat k ovládacímu prvku i kliknutím na jeho popisek.

Nyní si tedy vše ukážeme v praxi – nejprve připojíme popisek k ovládacímu prvku pomocí vnoření do labelu:

<label>Jméno: <input name="jmeno" /></label>

Nyní uděláme to samé s využitím atributu for:

<label for="jmeno">Jméno:</label> <input name="jmeno" id="jmeno" />

Popisky se ale připojují ke všem prvkům – nejen textovým polím – takže i element label byste měli využívat ve spojení se všemi ovládacími prvky.

Element fieldset – seskupování ovládacích prvků

Povolený obsah: (#PCDATA | legend | %block; | form | %inline; | %misc;)*

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).

Element fieldset v XHTML 1.0 Strict DTD

Element fieldset slouží k seskupení ovládacích prvků (spolu s jejich popisky) s podobným účelem. To pomůže ke zpřehlednění a optickému zkrácení formuláře, hlavně pokud se jedná o formulář delší. Použití elementu fieldset ale není omezeno pouze na formulář vyznačený elementem form, můžete ho využívat i u ovládacích prvků, které nejsou součástí formuláře.

Obsahem elementu smí být všechno z parametrické entity %Flow; (téměř jakýkoliv obsah), navíc doplněno elementem legend (o tom bude řeč za chvilku) – ten se však může vyskytovat maximálně jednou a navíc hned na začátku obsahu fieldset – smí být předcházen pouze tzv. bílými místy (mezera, přechod na nový řádek…).

Element legend – nadpis skupiny ovládacích prvků

Povolený obsah: %Inline;

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).

accesskey       %Character;       #IMPLIED

Tento atribut se používá k nastavení zkratkové klávesy pro přístup k danému nadpisu; již jsme se jím zabývali v části o odkazech.

Element legend v XHTML 1.0 Strict DTD

Element legend se používá k nastavení nadpisu (titulku) skupiny ovládacích prvků, vymezené elementem fieldset. Obsahem elementu je právě tento popisek.

Použití elementů fieldset a legend si nyní ukážeme na příkladu jednoduchého formuláře – snažil jsem se do něj zařadit většinu poznatků o formulářích, které jsem vám vyložil:

<form action="registrace.php" method="post" accept-charset="UTF-8 windows-1250" onsubmit="kontrola();">
<fieldset>
<legend>Osobní údaje</legend>
  <p><label>Křestní jméno: <input name="jmeno" /></label></p>
  <p><label>Příjmení: <input name="prijmeni" /></label></p>
  <p><label><input type="radio" name="pohlavi" value="muz" checked="checked" /> Muž</label>
  <label><input type="radio" name="pohlavi" value="zena" /> Žena</label></p>
</fieldset>
<fieldset>
<legend>Údaje o uživateli</legend>
  <p><label>Uživatelské jméno:
  <select name="username">
    <option selected="selected">Franta</option>
    <option>Pepa</option>
    <option value="cyril">Cyril Novák</option>
  </select>
  </label></p>
  <p><label>Heslo: <input type="password" name="heslo1" /></label></p>
  <p><label>Potvrzení hesla: <input type="password" name="heslo2" /></label></p>
</fieldset>
<fieldset>
<legend>Vzkaz</legend>
  <p><label>Váš vzkaz nám: <textarea cols="40" rows="15" name="vzkaz"></textarea></label></p>
</fieldset>
<p><input type="submit" value="Registrovat" /> <input type="reset" value="Vynulovat formulář" /></p>
</form>

Aby byl formulář úplně dokonalý, bylo by ho ještě třeba nastylovat a doprovodit klientskými skripty, které by kontrolovaly správnost zadaných údajů (aby uživatel nemusel pokaždé posílat formulář na server) a od věci by nebylo ani nadefinování několika klávesových zkratek pro přístup k jednotlivým ovládacím prvkům. Slušelo by se také dovysvětlit význam některých ovládacích prvků a textu by určitě neuškodilo ani určité oživení a vyjasnění. O to nám ale v tomto případě nešlo, proto se podívejte, jak bude přibližně formulář interpretován v prohlížeči:

Osobní údaje

Křestní jméno:

Příjmení:

Muž
Žena

Údaje o uživateli

Uživatelské jméno:
Franta Pepa Cyril Novák

Heslo:

Potvrzení hesla:

Vzkaz

Váš vzkaz nám:

A nyní již víte o formulářích v XHTML skutečně vše. Jak vidíte, jejich tvorba není tak přímočará, jak by zvenku mohla vypadat, a musíte zvážit mnoho aspektů – vytváření skutečných formulářů byste tedy měli věnovat zvýšenou pozornost.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

---

Další aktuální články na interval.cz

• Nedostatek paměti pro WordPress 3.0? Co s tím?
• Jaký bude (skutečný) výkon IE9 v prostředí internetu?
• Tipy pro tvorbu lepších vícejazyčných stránek
• Jak připravovat grafický návrh pro kodera?
• Novinky v prohlížečích: Firefox 4.0 beta 4

Tematicky související články

• XHTML - základní struktura dokumentu
• XHTML - vysunovací nabídky
• XHTML - element input
• XHTML - elementy button a textarea
• XHTML - deklarace prvků XHTML v DTD

Dejte vědět i ostatním o článku

Komentáře ke článku

Přidat nový komentář

Zpět na začátek komentářů | Zpět na začátek článku