V dnešním díle si ukážeme, jak můžeme uživatelům zpříjemnit práci s formuláři.
16.9.2004 15:00 | Pavel Kácha | přečteno 30232×
V minulých dílech jsme se naučili, jak se vytvářejí formuláře. A pokud trochu zapátráte v paměti, jistě si vzpomenete i na tabulky a na díly o formátování textu. Praktické HTML ale není jen o znalosti příkazů, musíte také vědět, jak jednotlivé prvky vzájemně zkombinovat - případně jaké další technologie použít - aby byl výsledný zdrojový kód optimalizovaný nejen pro zobrazení v nejmenovaném uzavřeném prohlížeči, ale aby byl přívětivý i k uživateli.
Kromě toho, aby se uživatel dokázal na stránkách rychle orientovat a našel hledané informace, je rovněž důležité, aby se dokázal dobře orientovat ve formulářích na vašich stránkách. Formuláře jsou vlastně jakýmsi komunikačním rozhraním mezi uživatelem a serverem. A každému je asi jasné, že se lépe domluví s někým, kdo mluví jednoduchým a jasným jazykem. Tvorba jasně srozumitelných formulářů není tak složitá jak by se mohlo zdát.
U jednodušších formulářů může stačit, že dáte všechny položky do jedné řádky, ale to platí jen u velice malých formulářů. Složitější formuláře byste ale měli umisťovat do tabulky. Vím, že to není zrovna ohleduplné k textový prohlížečům, ale v současnosti je to asi nejlepší způsob, jak problém vyřešit. Další řešení se nabízí například v CSS, ale s jeho podporou je to bohužel v některých prohlížečích ještě dost problematické, tudíž se tento způsob zarovnání nelze spolehnout na 100%.
Pokud tedy budeme vkládat formulář do tabulky, měli bychom do jednoho sloupečku vkládat popis a do druhého jednotlivé prvky formuláře. Každá položka formuláře by měla mít vlastní řádek, pokud dáte nějaké drobné políčko mezi další části formuláře, může se snadno stát, že uživatel ho přehlédne a nevyplní.
Vyjímkou jsou data, která jsou spolu nějak logicky provázaná například chcete od návštěvníka zjistit, na který den chce objednat vámi poskytovanou službu. V tomto případě je nesmysl dělit jednotlivé položky data do samostatných částí. Nejlepším řešením bude asi vytvoření jednoho řádku s popisem v jedné buňce a se třemi select-boxy pro jednotlivé části data ve druhé buňce. Pokud jako předvolenu hodnotu zvolíte popisky den, měsíc, rok, bude to naprosto dokonalé, ale musíte si ošetřit (nejlépe na straně serveru), aby uživatel vyplnil nějaký den a nehromadili se vám v databázi objednávky na den den a podobně.
Jednotlivé části formuláře by měly nějak logicky jít za sebou. Co byste si například pomysleli o autorovi stránky, kde jsou položky ve formuláři uspořádané takto:
V případě že používáte prvek pro víceřádkový text (textarea), doporučuji přidat jeho popisku zarovnání nahoru (style="vertical-align : top;"), je to možná jen drobnost, ale stránka potom vypadá mnohem lépe a je i přehlednější.
A k této části připojím i praktický příklad (spodní tlačítko formulář vymaže, ale data nikam neodešle ke zpracování - ve vašich stránkách by to tak samozřejmě nebylo..)
Párovým elementem <label></label> můžete velice zpříjemnit používání vašich formulářů - tento element slouží pro tvorbu klávesových zkratek. Pro určení políčka, ke kterému právě definovaná klávesová zkratka patří použijete atribut for="" a jako jeho hodnota bude jméno prvku, na který se má přemístit kurzor. Atributem accesskey="" nastavíte písmeno, které bude spolu s klávesou ALT tvořit klávesovou zkratku.
Tento kód vytvoří klávesovou zkratku ALT + E, která přemístí kurzor do pole pro zadání e-mailu (pole se jmenuje email - jde o část kódu vytrženou z tabulky). Pro lepší orientaci je aktivní klávesa v popisu zvýrazněna tučně.
Nápad vytvořit tyto klávesové zkratky byl jistě dobrý, ale některé prohlížeče je nepodporují nebo pod nimi už mají přiřazené své vlastní funkce, které mají přednost před těmi na stránce, takže ani není příliš perspektivní tuto jistě zajímavou funkci využívat.
Běžně můžete přecházet mezi jednotlivými aktivními položkami stránky pomocí klávesy TAB, pořadí prvků je podle pořadí jejich vložení do stránky. Pokud chcete toto pořadí změnit můžete k tomu využít atribut tabindex="", který je povolený pro elementy a, area, object, input, select, textarea, button a jehož parametrem je libovolné kladné celé číslo. Přechod mezi prvky stránky pomocí klávesy TAB potom probíhá tak, aby hodnota atributu tabindex="" neustále stoupala.
Pokud chcete jednotlivé části formuláře opticky pospojovat rámečkem, pomůže vám v tom párový tag <fieldset></fieldset>. Ukončovací tag je povinný. Mezi tyto tagy napíšete tu část stránky, kterou chcete orámovat.
V případě, že za počáteční tag <fieldset> připojíte párový tag <legend></legend>, bude mít rámeček i hezký nadspis.
Mohu jen doporučit, abyste všechny povinné položky kontrolovali ještě před tím, než je odešlete na server - typicky pomocí JS. Je to rychlejší - návštěvník hned vidí, co zapomněl vyplnit nebo co vyplnil špatně. Navíc ušetříte přenos zbytečných dat po síti.
Kontrola na straně klienta je sice užitečná, ale je nutné aby se data kontrolovala i na serveru před jejich zpracováním, proto tuto část rozhodně neopomíjejte.