Články

1. Rozložení jednotlivých prvků na stránce

Hlavním kritériem pro tvorbu formulářů je jejich uspořádání na stránce. Obecně platí, že všechna pole formuláře by měla být pod sebou, nikoliv vedle sebe. Toto rozložení je uživatelsky nejpřívětivější a nekomplikuje orientaci na stránce.

Nejčastěji se na WWW stránkách setkáváme se dvěma způsoby umístění popisků jednotlivých polí formuláře. A sice nad polem nebo vlevo od pole. Doporučoval bych používat popisky vlevo, neboť se potom celý formulář jeví kratším a pro uživatele snadněji vyplnitelným.

Nezapomínejme také na zarovnání samotných popisků. Jelikož se v našich krajích píše zleva doprava a jsme tak zvyklí i číst, měly by rovněž popisky být zarovnány doleva (nikoli doprava k formulářovým polím). Pro lepší estetický dojem je vhodné, aby jednotlivá pole byla zarovnána do sloupce a začínala levým okrajem stejně.

Pokud nemáme pro formulář dostatek místa, můžeme tam, kde je to možné, popisky vepsat do jednotlivých polí (např. input či textarea) a tyto potom JavaScriptem ošetřit, aby po kliknutí do pole (kdy pole získává focus) příslušný popisek zmizel.

Ukázka nesprávného formuláře s popisky nad prvky:

Ukázka nesprávného formuláře s popisky vedle prvků a zarovnanými do prava:

Ukázka správného formuláře s popisky vedle prvků a zarovnanými doleva:

2. Přístupnost a použitelnost formulářů

Aby byl formulář přístupný a použitelný pro všechny skupiny uživatelů, je důležité jim usnadnit jeho čtení a vyplňování. Pokud například očekáváme od uživatele zadání PSČ, které se skládá z pěti čísel a volitelně z mezery, pak je na místě využít atributu maxlength="6".

Někteří lidé jsou zvyklí (nebo nuceni) používat klávesnici místo myši. Pro tento případ bychom měli využít atributu tabindex, kterým určíme pořadí prvků při přemisťování kurzoru pomocí tabulátoru. Ostatně vyplňování formuláře s nadefinovaným tabindexem je podstatně rychlejší a pohodlnější i pro nehendikepované uživatele.

Nezbytným doplňkem pro přístupné formuláře jsou jejich popisky, které využijí zejména návštěvníci se zhoršeným zrakem využívající hlasové čtečky. Tato zařízení využívají formuláře tagů "fieldset" a "legend". "Fieldset" slouží ke zobrazení rámečku obklopujícího logicky související pole formuláře a "legend" tomuto rámečku přidělí popisek, který hlasová čtečka přečte.

Ukázka formuláře s nadefinovanými tagy "fieldset" a "legend":

Dále jsou interpretovány popisky jednotlivých polí formuláře (např. jméno, telefon, …), které jsou definovány v tagu "label". Použití "labelu" znamená rovněž celkové zlepšení použitelnosti formuláře, protože kromě spolupráce s hlasovou čtečkou umožníme uživatelům zaškrtnout pole (nebo se do něj přemístit) kliknutím na jeho popisek namísto nutnosti strefovat se myší přímo na samotné pole.

Existují v zásadě dvě možnosti použití tagu label:

• s atributem "for":
  <label for="jmeno">Jméno: </label><input id="jmeno" type="text" name="jmeno" />
• bez atributu "for":
  <label>Jméno: <input type="text" name="jmeno" /></label>

Použití jedné nebo druhé varianty je na tvůrci stránek. Obě verze jsou správné a syntakticky v pořádku. Osobně se však přikláním k verzi bez atributu "for", protože má jednodušší zápis a je méně náchylná na vznik chyby v případě pozdějších aktualizací.

U každého formuláře bychom neměli zapomenout uvést krátkou informaci o tom, co se stane po jeho odeslání. Například ke komu se vyplněný formulář dostane, za jak dlouho může návštěvník očekávat odpověď či vyřízení záležitosti (reakci na dotaz, dodávku zboží apod.), zda má očekávat potvrzovací e-mail a podobně. Uživatel by měl být dostatečně informován a to zejména v případě, že vám svěřuje své osobní údaje či peníze.

Je velmi obvyklé, že provozovatel stránek ve formuláři požaduje po uživateli povinně vyplnit některé položky. Ty potom musí být vždy zřetelně označeny, aby je návštěvník na první pohled rozeznal od ostatních. Nejčastěji se označují hvězdičkou nebo jiným symbolem, který je na začátku formuláře vysvětlen.

Jak jsem již zmínil v úvodu článku, jsou srozumitelné a snadno použitelné formuláře kritické pro vaši komunikaci a obchodování na internetu. Snažte se tedy návštěvníkovi usnadnit rozpoznávání formulářů mezi ostatními prvky stránky a příliš neexperimentujte se vzhledem jednotlivých formulářových polí. Tento neduh se v poslední době velmi rozšířil a pro méně zkušeného uživatele bývá obtížné rozlišit, co je rámeček a co například pole pro zadávání textu.

V této souvislosti bych také rád poukázal na nutnost vhodné volby popisku formulářových tlačítek. Ta by měla vždy mít uveden jasný text vypovídající o akci, kterou tlačítko po kliknutí provede. Snažte se vyhnout nic neříkajícím popiskům jako je "ok", "provést" či ">>". Například tlačítko pole pro hledání by mělo nést text "hledat", přihlašovací formulář by měl být zakončen tlačítkem "přihlásit" apod.

3. Délka formulářů

Snažte se, aby vaše formuláře byly vždy co nejkratší a uživatel neměl obavy z časové náročnosti. Chtějte tedy vyplnit jen ta pole, o kterých už teď víte, jak je využijete. Je-li už delší formulář nevyhnutelný, pokuste se jej rozdělit do více stránek. Tyto stránky označte jako jednotlivé kroky a v průběhu vyplňování uživatele informujte v kterém kroku (na kolikáté stránce formuláře) se nachází a kolik mu jich ještě zbývá.

4. "Inteligentní" formuláře

Současné internetové technologie umožní významným způsobem zvýšit komfort vyplňování formulářů a zároveň zkvalitnit a očistit získávaná data. K tomu nám slouží tzv. inteligentní formuláře. Bez velkých obtíží je můžete zavést i na vašem webu.

Mezi funkce, které inteligentní formuláře nabízí, patří například:

• zobrazení nápovědy po najetí myší na popisek pole,
• pole pro vyplnění e-mailové adresy má předvyplněný zavináč (@),
• často udávané hodnoty ve výběrech nastavíme jako označené (např. Česká republika) nebo je v seznamech uvedeme na začátku,
• formulář přijme a automaticky zpracuje údaje v různých formátech (např. datum: 1.8.2005, 1/8/2005, 01/08/05; telefonní číslo +420 333 333 333, 333-333-333 apod.),
• pomocí JavaScriptu můžeme přímo při zadávání údajů přeformátovat hodnoty na námi požadované (PSČ, datum, telefonní čísla, …),
• omezíme délku vstupních hodnot na maximální povolenou velikost (maxlength) a to nejen u input polí, ale i pomocí JavaScriptu u textových polí (textarea), uživatele vždy o této maximální délce informujeme v přilehlém popisku.

Pokud bychom chtěli co nejvíce eliminovat špatně formátované hodnoty už na straně uživatele, nabízí se nám možnost získávat je z námi definovaných select boxů (např. datumy, státy, kategorie, …).

5. Použití formulářových prvků

(X)HTML nám umožňuje celkem 10 typů vstupů (značka INPUT):

• text: kratší texty, které příliš nepřevyšují svou délkou samotné pole (např. hledaný výraz, přihlašovací jméno apod.),
• password: neveřejné vstupy (nejčastěji heslo), text je při psaní zaměňován za hvězdičky či jiný neurčitý symbol,
• checkbox: pro vyjádření souhlasu s tvrzením v popisku (např. souhlas se zasíláním elektronického zpravodaje) nebo pro zaškrtnutí jednoho či více výběrů z řady variant (např. oblasti, o nichž si uživatel přeje být informován),
• radio: pro zaškrtnutí výběru, kdy je možné zvolit pouze jedinou z řady variant (obvykle rozhodování ano/ne, muž/žena/, způsob dopravy apod.),
• hidden: neviditelný prvek, který je před uživatelem skryt, ale nese systémovou informaci potřebnou k vyhodnocení celého formuláře,
• button: tlačítko použitelné pouze v kombinaci s JavaScriptem, obvykle je možné jej nahradit jiným prvkem a bez použití JavaScriptu (např. submit),
• file: vstup pro nahrání souboru z našeho lokálního disku na server (např. dokument se životopisem),
• submit: prvek sloužící k odeslání formuláře,
• reset: tlačítko pro smazání hodnot z formuláře, ošetřete kliknutí na něj JavaScriptem tak, že před smazáním dat se uživatele ještě zeptáte, zda chce formulář opravdu vymazat,
• image: obrázek, který je zároveň typu submit, tzn. po kliknutí na něj se odešle formulář na server.

Další typy prvků pro použití ve formulářích:

• textarea: používá se tam, kde očekáváme od uživatele delší text,
• select: roleta pro výběr z předdefinovaných možností.

Chtěl bych na tomto místě zmínit jedno doporučení týkající se možností, které mají návštěvníci při kontaktování vás či vaší firmy prostřednictvím e-mailu: vždy na stránce s kontakty uvádějte kromě e-mailových adres i kontaktní formulář. Nikdy nevíte, zda vás uživatel (a možná i potenciální zákazník) nebude chtít kontaktovat z místa, kde nemá svého e-mailového klienta. Může to být z kolegova počítače či z internetové kavárny. V takovém případě nemůže kliknout na vaši e-mailovou adresu a jediné, co mu zbývá, je použití formuláře.

6. Kontrola (validace) vyplněných dat

Abychom ověřili, zda uživatel vyplnil údaje správně, musíme je po něm zkontrolovat (tj. zjistit, zda zadaná e-mailová adresa má platný formát, datum ve vloženém formátu dokáže náš interní systém automaticky interpretovat, jsou vyplněné všechny povinné položky apod.). Primárně musí probíhat tato kontrola dat na straně serveru (PHP, ASP, JAVA, …). Pouze jako doplňkovou kontrolu používejte skriptování na straně klienta (JavaScript). Výhoda JavaScriptu je, že se vyplněná data nemusí odesílat na server a stránka se znovu nenahrává. Zásadní nevýhodou však zůstává, že ne každý uživatel jej musí mít zapnutý.

Po úspěšné validaci (kontrole platnosti dat) musí následovat informace uživateli o jejím výsledku. Jsou dvě možnosti:

• úspěšná: všechna data jsou v rámci přípustných parametrů,
• neúspěšná: některá z validovaných hodnot nebyla korektní a validace vrátila chybu.

V prvním případě, kdy byla validace úspěšná, bychom měli uživatele informovat o úspěšném odeslání na server a možnostech pokračování (pokračujte v nákupu, nepřehlédněte, může se vám hodit, …).

V druhém případě, kdy byla validace neúspěšná, musíme na tuto skutečnost upozornit, znovu zobrazit formulář a zřetelně v něm vyznačit pole, která byla vyplněna nesprávně. Vyznačení můžeme provést například podbarvením pole a označením symbolem, umístěním kurzoru do pole nebo textovou hláškou. Nejlepší volbou je kombinace těchto tří možností, která nám zaručuje, že uživatel byl dostatečně informován a ví, co má opravit.

7. Ochrana osobních údajů

V případě, že jste při zpracování formuláře uložili osobní údaje návštěvníka či jeho e-mailovou adresu do vaší databáze, měl by na to být upozorněn e-mailem se žádostí o potvrzení souhlasu. Zabráníte tak zneužívání e-mailových adres (formulář mohl totiž jménem cizí osoby vyplnit někdo úplně jiný). V případě, že se jednalo o nákup v elektronickém obchodě, je obdobný informační e-mail prakticky nezbytný.

Ochrana osobních údajů probíhá podle zákona č. 101/2000 Sb., kde osobním údajem se rozumí jakýkoliv údaj týkající se určeného nebo určitelného subjektu údajů. Subjekt údajů se považuje za určený nebo určitelný, jestliže lze na základě jednoho či více osobních údajů přímo nebo nepřímo zjistit jeho identitu. O osobní údaj se nejedná, pokud je třeba ke zjištění identity subjektu údajů nepřiměřené množství času, úsilí či materiálních prostředků.

Pokud tedy hodláte ve svých formulářích požadovat osobní údaje, měli byste být registrováni u Úřadu na ochranu osobních údajů  a mít v pořádku ochranu těchto dat (týká se to např. serveru, na němž jsou data uložena). V zásadě existují dva druhy subjektů – správce a zpracovat. Více informací získáte přímo z textu zákona. Součástí formuláře musí rovněž být nástroj pro jednoznačné projevení souhlasu se zpracováním osobních údajů – např. checkbox, který nesmí být automaticky zaškrtnutý.

Jak je vidět, je manipulace s formuláři často provázena rozesíláním e-mailů. Myslím tedy, že bude vhodné připomenout ještě jednu normu, která tuto oblast upravuje. Jedná se o zákon č. 480/2004 Sb. o některých službách informační společnosti, podle něhož musí e-mailová zpráva například splňovat tyto náležitosti:

• musí být jasně označena jako obchodní sdělení,
• musí obsahovat totožnost odesílatele, jehož jménem se komunikace uskutečňuje,
• musí obsahovat platnou adresu, na kterou může adresát přímo a účinně zaslat info, že si nepřeje, aby mu byly obchodní informace dále zasílány.