Popisek formulářového pole

Má-li návštěvník webu vyplnit políčko ve formuláři, je zpravidla nutné ho nějakým způsobem popsat.

Na příkladu je možné pozorovat 3 popisky:

1. název políčka – „E-mail“,
2. příklad hodnoty, kterou má návštěvník vyplnit – „jmeno@domena.cz“ (slouží k tomu atribut placeholder),
3. sekundární popisek blíže doplňující význam políčka.

Bývá zvykem, že kliknutí na hlavní popisek tlačítka přesune kursor do políčka (tzv. „dá políčku focus“), takže je možné začít psát. Technicky se to řeší pomocí značky <label>.

Kvůli responsivním webům je pro zařízení s úzkou obrazovkou nutné řešit nedostatek místa, což vytváří tlak na prostorově úspornější provedení formuláře.

Otazník obsahující vysvětlení

Prvním způsobem úspory místa je schovat sekundární popisek do tlačítka a vysvětlení zobrazovat v tooltipu.

Technické řešení tooltipu potom samozřejmě může být jiné než prostý atribut title.

Zatímco u zařízení ovládaných myší nepředstavuje najetí na popisek výrazný problém, horší je to u ovládání dotykem.

Obyčejný atribut title je úplně ze hry, protože na řadě zařízení z něj nejde popisek vymáčknout. Řešení používající JavaScript má zase problém s tím, že vyžaduje od uživatele vynaložit zvláštní úsilí a tapnout na otazník. To je zvlášť problematické v situaci, kdy se zrovna píše do políčka a je zobrazena klávesnice, protože dotyk mimo ji skryje.

Placeholder jako popisek

Prázdný <input> čekající na vyplnění může vybízet k umístění popisku právě do políčka.

Od IE 10 jde takové chování snadno vytvořit atributem placeholder.

<input placeholder="text">

Ačkoliv to může působit elegantně a úsporně s ohledem na prostor, má poměrně zásadní problém.

Mizení popisku

Internet Explorer a Opera 12 skryjí obsah placeholderu ihned po aktivování políčka. Pokud tedy člověk rychle klikne do políčka nebo použije klávesu Tab pro přeskočení na další pole, popisku si vůbec nemusí všimnout a už se k němu snadno nedostane.

Problém může nastat i v situaci, kdy je uživatel během vyplňování pole něčím vyrušen. Začne vyplňovat e-mail, najednou se přepne někam jinam a po návratu k formuláři už vůbec netuší, co vyplňuje. Nezbývá potom než všechno smazat (+ v IE kliknout někam mimo) nebo obnovit stránku, aby se popis pole opět objevil.

Závěr je proto ten, že popisek políčka musí být vždy viditelný. Případně musí být za každé situace patrné, co se má do políčka vyplnit.

V atributu placeholder by tedy nemělo být nic hodně důležitého.

Přesun popisku

Relativně rozumným řešení je umístění popisku do prostoru tlačítka a jeho zmenšení a přesunutí jinam tak, aby byl popisek stále viditelný.

V praxi to může vypadat následovně.

Odkazy jinam

• Codrops: Some More Inspiration for Text Input Effects – různé efekty popisků
• Osvaldas Valutis: Placeholder Polyfill with Password Support – podpora placeholderu pro IE 9 a starší