Myslete, když navrhujete formulář!

Navrhnout formulář na HTML stránce zvládne každý blembák. Taky to podle toho vypadá - vyplnění formuláře se leckdy blíží náročnosti porodu dospělého ježka. Co že se mi na nich nelíbí?

Přerušme psaní o Africe a dejme si jako příklad registrační formulář k nějaké službě. K e-shopu, k nějaké společenské síti, k něčemu...

Zaprvé: Opravdu potřebujete vědět všechno to na co se mě ptáte? Opravdu musím kvůli registraci na web vyplnit svůj telefon, zemi původu, pohlaví, datum narození, kontrolní otázku, ...? Kdepak! V naprosté většině případů jsou vám tyhle informace NANIC, leda byste si dělali nějakou statistiku - ale to mě zase nemusí zajímat. Já kvůli vašim statistikám nestrávím dvacet minut vyplňováním registračního formuláře!

Zadruhé: Opravdu potřebujete nutně všechny povinné položky? Nepotřebujete! Jediné, co má být opravdu nutné, je uživatelské jméno a/nebo mail, plus heslo, pokud to chcete dělat tak. Vše ostatní je v naprosté většině případů zbytné.

Zatřetí: Při chybě vypište zadaná data! To platí zejména pro formuláře v CMS, ale i u dalších se to hodí. Situace je taková: Někdo napíše článek, vyplní formulář, cokoli, klikne na odeslat, a objeví se mu stránka: "Na serveru došlo k chybě připojení k databázi, data nemohla být uložena!" Co teď? Člověk může buď kliknout na Zpět a doufat, že to tam najde v původním stavu (většinou spíš nenajde), nebo kliknout na Reload a doufat, že teď už je databáze OK. Ovšem co když je problém v něčem špatně vyplněném? (Viděl jsem CMS, kde člověk mohl zadat dva stejné štítky, a pokud je zadal, skončil s nějakým PARSER ERROR - jak teď získat data?) Nebo co dělat s formuláři, které jsou chráněné pomocí Nonce, co při prvním odeslání samosebou expiruje? Pokud se objeví chyba při odesílání formuláře, tak se vraťte na stránku s formulářem a data z POST do něj vložte, nebo je alespoň vypište, pokud to má smysl!

Začtvrté: Používejte JS jako lidi! Mám JavaScript zablokovaný a pro jednotlivé stránky jej povoluju. Na většině webů, kde jsem poprvé, je tedy vypnutý (a bude nás víc a víc!) - takže formulář, který jde odeslat JEDINĚ JavaScriptem, je neomluvitelná prasárna! Ne, neexistuje situace, kde bych byl ochoten uznat jeho oprávněnost - a pokud ano, tak nechť je takový formulář v místě, kde už je otestováno, že uživatel má JS povolený!

Zapáté: použijte AJAX! Cpete ho všude možně, tak ho dejte i do formuláře, ale proboha: rozumně! To že mi váš formulář napíše, že vybrané uživatelské jméno je obsazené, to je fajn. Blbé je, když to kontroluje po každé změně obsahu políčka a o neúspěchu informuje ALERTem - napsat "adent" znamená pětkrát odklepnout alert.

Zašesté: Uživatel by neměl poznat, kde je formulář kontrolovaný. Tedy jestli mu ho kontroluje JS v prohlížeči, nebo skript na serveru. Výsledek kontroly by měl být pokaždé stejný: Tentýž formulář, bez změny v datech, jen s upozorněním: "Zde to musí být jinak". Nic mě nedokáže nakrknout víc, než když mě JS pětkrát upozorní na to, že "heslo je příliš krátké" (aniž by napsali, že chtějí aspoň 8 znaků a kombinaci písmen a číslic) a po odeslání se objeví tentýž formulář, kde je heslo ("z bezpečnostních důvodů") smazané, a kdesi nahoře nebo dole je malým písmem napsáno: "Zadaná e-mailová adresa neexistuje".

K té kontrole mě napadá: Vždyť přeci není těžké udělat unobtrusive řešení, kde se při kliknutí na odesílací tlačítko vezme obsah a pomocí XHR pošle na server ke zpracování. Pokud vše proběhne v pořádku, přesměrujeme uživatele na stránku "OK", pokud serverový skript najde chyby, tak se vyznačí patřičná políčka a napíše se k nim, co se stalo. Výhoda je ta, že uživatel formulář stále neodeslal, takže mu zůstal tak vyplněný, jak byl.

Zasedmé: Jednou CAPTCHA, navždy CAPTCHA! Vyplním formulář, opíšu CAPTCHA, odešlu, vše bylo OK, ale nenapsal jsem jméno svého psa za svobodna. Dopíšu jej tam, odešlu - a objeví se chyba, že jsem neopsal správně znaky z obrázku. Jděte do Pihele tmavýho! Buď tam nechte stejný obrázek, nebo si zapamatujte, že už jsem ho jednou opsal! Nebo použijte tu výše zmíněnou AJAX featůrku s odesíláním formuláře pomocí XHR.

Zaosmé: Kontrolní otázky jsou na prd! Jméno vašeho psa i jméno vaší matky je v době Facebooku a dalších dobrovolných prozrazovadel naprosto iluzorní metodou ochrany. A KDYŽ UŽ se rozhodnete podobný nesmysl implementovat, tak laskavě nechte na mně, jak se jmenuje náš pes, a přijměte fakt, že její jméno má míň než pět znaků.

Tolik jsem měl na srdci k HTML formulářům.

(A nejsem zjevně sám, viz Plaváčkovo serióznější pojednání o použitelných formulářích)