Placeholder

Co je to placeholder?

Placeholder je zástupný text nebo obrázek, který dočasně zaujímá místo skutečného obsahu. Ve webovém prostředí se nejčastěji setkáte se dvěma typy placeholderů. První typ je zástupný text ve formulářích – jemně šedý, často kurzívou psaný text uvnitř vstupního pole, který naznačuje, jaká data má uživatel zadat (například „vaše@email.cz" v poli pro emailovou adresu). Tento text zmizí ve chvíli, kdy začnete psát. Druhý typ je zástupný obrázek v designu – dočasná grafika používaná během vývoje webu místo finálních fotografií nebo ilustrací. Placeholder ve formuláři zlepšuje uživatelskou zkušenost (UX) tím, že uživateli jasně ukazuje, co má do pole napsat, bez nutnosti číst dlouhý popisek.

Pro většinu lidí je placeholder nejznámější z kontaktních formulářů nebo přihlašovacích stránek. Je to ten světle šedý text, který vidíte například v poli „Hledat" nebo v kolonkách pro jméno a příjmení. Placeholder není povinný obsah – slouží pouze jako nápověda nebo příklad správného formátu. Důležité je pochopit, že placeholder není totéž co label (popisek pole) – tyto dva prvky mají odlišnou funkci a nemohou se navzájem nahrazovat. Špatné používání placeholderů je častá chyba, která zhoršuje použitelnost formulářů zejména pro uživatele se sníženou přístupností.

V HTML kódu se placeholder vytváří velmi jednoduše pomocí atributu placeholder="" u vstupních polí. Například: <input type="email" placeholder="vaše@email.cz">. Prohlížeče pak automaticky zobrazí tento text jemně šedivě uvnitř pole, dokud uživatel nezačne psát. Vývojáři často používají placeholdery také v designových nástrojích jako Figma nebo Adobe XD – klasický „Lorem ipsum" text nebo šedé obdélníky s nápisem „Image placeholder" jsou běžné v mockupech před tím, než je k dispozici finální obsah. Správné pochopení a používání placeholderů je základem promyšleného designu formulářů a vstupních polí.

Placeholder ve formulářích

Placeholder ve formulářích je HTML atribut, který zobrazuje pomocný text přímo uvnitř vstupního pole. Jeho hlavní funkcí je poskytnout uživateli rychlou nápovědu o očekávaném formátu dat – například „+420 123 456 789" v poli pro telefonní číslo nebo „Praha" v poli pro město. Placeholder se zobrazuje pouze tehdy, když je pole prázdné. Ve chvíli, kdy do něj uživatel klikne nebo začne psát, placeholder okamžitě zmizí. Po smazání veškerého textu se placeholder opět objeví. Toto chování je automatické a není potřeba ho programovat – je to standardní funkcionalita webových prohlížečů.

Technicky vzato, placeholder nemá žádnou funkční hodnotu pro odeslání formuláře – neukládá se do databáze a nepřenáší se na server. Je to čistě vizuální pomůcka pro uživatele. Mnoho webů používá placeholder jako alternativu k externímu labelu (popisku nad polem), což sice vypadá čistě a minimalisticky, ale má vážné nedostatky z hlediska použitelnosti. Když uživatel začne vyplňovat pole, placeholder zmizí – pokud vyplňuje dlouhý formulář a pak se vrátí k již vyplněnému poli, nemá jak zjistit, co tam mělo být, protože nápověda je pryč. Proto je důležité placeholder používat jako doplněk k labelu, ne jako jeho náhradu. Label zůstává viditelný vždy, placeholder poskytuje jen dodatečnou nápovědu o formátu.

Správně navržený placeholder využívá několik pravidel. Měl by být vizuálně odlišný od skutečně zadaného textu – obvykle světle šedý, nikdy černý. Uživatel musí na první pohled rozpoznat, že se jedná o pomocný text, ne o předvyplněnou hodnotu. V moderním webdesignu se často používá barva s nízkým kontrastem (například šedá #999999 na bílém pozadí). Placeholder by také měl být krátký a výstižný – ideálně 1-3 slova. Není to místo pro dlouhé instrukce.

Rozdíl mezi placeholderem a labelem

Mnoho lidí zaměňuje placeholder a label, ale jejich role jsou zcela odlišné. Label (popisek pole) je trvalý text, který identifikuje, co má pole obsahovat – například „E-mailová adresa", „Jméno a příjmení" nebo „Heslo". Label zůstává viditelný vždy, i když je pole vyplněné. Typicky se zobrazuje nad polem nebo vedle něj. Placeholder je dočasná nápověda uvnitř pole, která zmizí při psaní. Poskytuje příklad formátu nebo upřesňující informaci – například „jan.novak@gmail.com" nebo „Alespoň 8 znaků". Label odpovídá na otázku „Co?", placeholder na otázku „Jak?" nebo „Jaký formát?".

Proč nelze placeholder použít jako náhradu labelu? Hlavní důvody jsou praktické a také související s přístupností webu. Když uživatel začne vyplňovat pole, placeholder zmizí – pokud vyplňuje dlouhý formulář a zapomene, co do již vyplněného pole patřilo, nemá jak to zjistit. Musí text smazat, aby se placeholder znovu objevil. Pro uživatele čteček obrazovky (screen readers) používaných nevidomými není placeholder vždy dostupný – čtečky primárně čtou labely. Formulář pouze s placeholdery je tedy často nepoužitelný pro lidi s handicapem. Navíc, pokud prohlížeč automaticky předvyplní pole (autocomplete), placeholder zmizí a uživatel nevidí, co pole znamená. Zlaté pravidlo: vždy používejte viditelný label a placeholder jen jako volitelný doplněk pro upřesnění formátu.

Jak psát dobré placeholdery

• Buďte struční a konkrétní

Placeholder není místo pro věty. Používejte krátké příklady nebo formáty. Místo „Zde napište vaši emailovou adresu ve formátu uzivatel@domena.cz" zkrátka napište „vase@email.cz". Uživatelé placeholder skenují pohledem, nečtou pozorně.

• Uveďte konkrétní příklad formátu

Nejlepší placeholdery ukazují přesný formát očekávaných dat. Pro telefonní číslo „+420 123 456 789", pro datum „15.02.2026", pro PSČ „110 00". Vizuální příklad je rychlejší na pochopení než slovní instrukce. To zlepšuje UX a snižuje chybovost při vyplňování.

• Pište srozumitelně a přirozeně

Vyhněte se technickému žargonu. Místo „Input full name string" napište „Jan Novák". Placeholder by měl být v jazyce webu a formulován přirozeně tak, jak by to napsal běžný uživatel.

• Zachovejte konzistenci napříč formulářem

Pokud v jednom poli používáte formát „jmeno@email.cz", nepoužívejte jinde „Jméno Příjmení". Držte se jednotného stylu kapitalizace (buď vše s malým písmenem, nebo všechna slova s velkým začátečním písmenem). Konzistence snižuje kognitivní zátěž uživatele.

• Používejte vhodnou barvu s dostatečným kontrastem

Placeholder musí být vizuálně odlišný od skutečně zadaného textu, ale nesmí být nečitelný. Příliš světlá šedá (například #DDDDDD) může být těžko viditelná pro lidi se slabším zrakem. Doporučený kontrast je alespoň 4.5:1 podle WCAG standardů přístupnosti. Typicky dobře funguje #757575 (středně šedá).

• Nikdy nepoužívejte placeholder pro kritické informace

Placeholder je dočasný – zmizí při psaní. Proto nikdy neumísťujte důležité instrukce nebo upozornění pouze do placeholderu. Pokud je něco důležité (např. „Heslo musí obsahovat číslo a velké písmeno"), použijte pomocný text pod polem, který zůstane viditelný po celou dobu.

Nejčastější chyby při používání placeholderů

• Placeholder jako náhrada labelu

Častá chyba je použít pouze placeholder bez viditelného labelu. Vypadá to čistě a minimalisticky, ale je to špatná praxe. Uživatel po začátku psaní ztratí kontext, co pole znamená. Řešení: vždy používejte viditelný label, placeholder jen jako doplněk.

• Příliš dlouhý text

Placeholder není místo pro věty nebo detailní instrukce. Dlouhý text se na mobilních zařízeních nevejde a je matoucí. Pokud potřebujete více informací, použijte pomocný text pod polem nebo tooltip.

• Kritické instrukce jen v placeholderu

Pokud je informace důležitá (např. požadavky na formát hesla, upozornění na poplatky), nesmí být pouze v placeholderu, který zmizí. Takové informace patří do trvalého pomocného textu.

• Špatný kontrast barvy

Příliš světlý placeholder je špatně viditelný zejména na mobilech a na slunci. Příliš tmavý se snadno splete se skutečně vyplněným textem. Najděte zdravou střední cestu s kontrastem alespoň 4.5:1 podle WCAG standardů.

• Předvyplněné hodnoty místo placeholderu

Nikdy nepoužívejte placeholder jako předvyplněnou hodnotu. Pokud chcete pole předvyplnit (například aktuální datum), použijte atribut value, ne placeholder. Uživatel musí jasně vidět rozdíl mezi nápovědou a skutečnými daty.

Placeholder a přístupnost (accessibility)

Z hlediska přístupnosti webu má placeholder několik problémů. Čtečky obrazovky (screen readers) používané nevidomými uživateli často placeholder nečtou nebo ho čtou nekonzistentně – záleží na konkrétní čtečce a prohlížeči. Některé čtečky oznámí pouze label, placeholder ignorují. Jiné ho přečtou, ale až po labelu, což může být matoucí. Proto je absolutně nezbytné mít viditelný label – formulář postavený jen na placeholderech je pro nevidomé uživatele prakticky nepoužitelný. Pokud placeholder obsahuje důležitou informaci o formátu, měla by být také v trvalém pomocném textu.

Dalším problémem je kontrast barvy. Mnoho designerů používá velmi světlé placeholdery (například #CCCCCC nebo #DDDDDD), které jsou těžko čitelné pro lidi se slabším zrakem nebo při přímém světle na mobilním zařízení. WCAG 2.1 standardy přístupnosti doporučují minimální kontrast 4.5:1 mezi textem a pozadím. Bohužel mnoho webů toto porušuje. Řešení je použít tmavší odstín šedé pro placeholder (například #757575), který je stále vizuálně odlišný od skutečného textu (obvykle černý #000000), ale lépe čitelný. Správné používání placeholderů v kontextu přístupného webu je součástí širší strategie responzivního a přístupného designu, který funguje pro všechny uživatele bez ohledu na jejich schopnosti nebo zařízení.

Související pojmy