Moderní tvorba webových aplikací

O webu

Popisek formulářového pole

Jakým způsobem řešit popisky formulářových prvků.

6 minut

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

Související články

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025