Popis formulářového políčka

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 uvedený e-mail vám budeme posílat spamy

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.

  • JS tooltip – vysvětlující popisek po najetí myší

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Mezera v PSČ

Mezera v PSČ

Jak a zda vůbec automaticky odsazovat uživatelem zadané znaky PSČ do formulářového políčka.

Kam umístit popisky formuláře

Kam umístit popisky formuláře

Jak umístit popisky formulářových prvků, aby bylo vyplňování formuláře co nejpohodlnější.

Napovídání e-mailu

Napovídání poskytovatele e-mailu

Jak usnadnit vyplňování e-mailové adresy automatickým napovídáním poskytovatele.

Odkaz jako tlačítko

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

Komentáře