Použitelné a přístupné webové formuláře

Formulář jako definiční seznam

Výhody definičního seznamu

Další zajímavou metodou je využití výhod definičního seznamu. Pokud jste se náhodou s něčím podobným ještě nesetkali, vězte, že definiční seznam (definition list, značka <DL>) vypadá ve výchozím formátování v prohlížeči nějak takhle:

První pojem: Vysvětlení prvního pojmu čili definice
Druhý pojem: Vysvětlení druhého pojmu čili definice

<dl> <dt>První pojem</dt> <dd>Vysvětlení prvního pojmu čili definice</dd> <dt>Druhý pojem</dt> <dd>Vysvětlení druhého pojmu čili definice</dd> </dl>

Je sice pravda, že takovéto využití definičního seznamu je přinejmenším sporné, nicméně faktem zůstává, že začíná být mezi webdesignery poměrně oblíbené a to především ze dvou důvodů:

splňuje totiž požadavek na skupinu uspořádaných dvojic, v našem případě se jedná o element <DT> jako termín definice a element <DD> určený k vlastnímu popisu definice
z hlediska CSS se jedná prvek, který se velmi snadno a pohodlně styluje

Názorný příklad užití definičního seznamu

Ukažme si, jak dopadne tvorba formuláře z předchozího příkladu, využijeme-li možností, které nám dává seznam definic.

Zdrojový kód vyhlíží následovně

<form> <dl> <dt><label for="jmeno">Jméno:</label></dt> <dd> <input type="text" size="20" id="jmeno" name="jmeno" /> </dd> <dt> <label for="prijmeni">Příjmení:</label> </dt> <dd> <input type="text" size="20" id="prijmeni" name="prijmeni" /> </dd> <dt> <label for="poznamka">Poznámka:</label> </dt> <dd> <textarea id="poznamka" name="poznamka" cols="20" rows="5"></textarea> </dd> </dl> </form>

Přehledný a snadno použitelný zůstane formulář i při vypnutých stylech:

Obrázek - formulář pomocí seznamu definic

Pak už stačí přidat do stylového předpisu pár jednoduchých definic a vida, máme stejný vzhled formuláře jako bychom použili tabulku:

Hlasové čtečce je opět předložen srozumitelný kód zajišťující správnou interpretaci.

Než použijete definiční seznam

Jak už jsem zmínil, využití seznamu definic je ze sémantického hlediska sporné a definiční seznam koneckonců nebyl určen primárně pro formuláře. Je to prostě jenom jedno z možných řešení, které je jak použitelné, tak přístupné, což je nakonec rozhodující. Jestli zvolíte tabulku, odstavce nebo definiční seznam je jenom na vaší volbě, ale dovolte mi upozornit na to, že pro definování funkce a vzhledu formuláře jsou ve specifikaci HTML přímo určené elementy. Lze říci, že bez těchto tří řešení se velmi snadno obejdete, protože máte k dispozici velmi užitečné prvky:

<FIELDSET>, <LEGEND> a <LABEL>

V následujicím příkladě si ukážeme, jak jenom pomocí těchto tří elementů vytvoříme složitější webový formulář, který se bude vyznačovat především snadnou použitelností, přístupností a také mimimem potřebného kódu. Pomocí nástrojů, jež máte k dispozici v CSS, pak můžete svému formuláři dopřát velmi elegantní a přitom přehledný vzhled.