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

Formulář bez použití tabulky

Položky formuláře jako odstavce

Možná máte pocit, že vzhledem k jednoduchosti vlastního formuláře je zdrojový tabulkový kód přeci jen trochu nafouknutý. Podobný pocit mám také a proto nyní zkusíme totožný formulář zbavit nadbytečného tabulkového balastu. Použijeme přitom element určený pro definici odstavce <P>. Popisek a formulářové pole vložíme do odstavce a obdržíme tento výsledek:

Bohužel element <label> je řádkovým (inline) prvkem a proto je výsledek našeho snažení poněkud nesymetrický. Postačí ale odřádkovat (pomocí <BR> a zobrazení se ihned změní k lepšímu:




Výsledný formulář teď vypadá trochu jinak než za použití tabulky - popisky jsou umístěny nad formulářovými poli, což je ale v pořádku. Popisky můžete umístit vlevo nebo nad prvky formuláře. Obojí je možné a uživatelé jsou na to zvyklí. Výjimkou jsou popisky zaškrtávacích tlačítek a přepínačů, ty se umisťují většinou zprava, jak uvidíme dále.

Letmým pohledem do zdrojového kódu zjistíme, že je mnohem kratší a také mnohem přehlednější.

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

A při vypnutých stylech obdržíme také přehledný a funkční formulář:

Formulář bez použití tabulky
Obrázek - formulář bez použití tabulky

Ani hlasová čtečka nezaváhá a nebude mít problém postiženému uživateli správně interpretovat jednotlivé prvky formuláře.

Určeno spíše pro jednoduché formuláře

Uvedená metoda je vhodnější spíše pro jednoduché, třeba kontaktní formuláře. Každý popisek i ovládací prvek (tedy formulářové pole) je umístěn ve vlastním odstavci, což je koneckonců i sémanticky správné. V nestylované stránce by pak výchozí hodnoty výplně a okrajů pro odstavec <P> měly postačit k čitelnému odsazení jednotlivých položek.