Input

Co je input?

Input neboli vstupní pole je interaktivní prvek formuláře, do kterého návštěvníci webu zadávají informace. Představte si klasický papírový formulář u lékaře – input pole je elektronickou verzí těch prázdných řádků, kam píšete své jméno, telefonní číslo nebo datum narození. Na webu slouží přesně ke stejnému účelu: umožňuje uživatelům komunikovat s webem a předat vám důležité informace.

Input pole najdete prakticky na každém moderním webu. Zadáváte do nich svou emailovou adresu při přihlášení, vyplňujete kontaktní formulář nebo vyhledáváte produkty v e-shopu. Bez vstupních polí by web byl jednostrannou komunikací – mohl by vám jen předávat informace, ale vy byste nemohli nijak reagovat. Input pole dělá z webu skutečně interaktivní nástroj.

Každé vstupní pole má své konkrétní využití. Některá jsou určena pro krátké texty jako jméno, jiná pro emailové adresy, hesla nebo telefonní čísla. Správně navržené a použité input pole výrazně ovlivňuje, jak snadno a příjemně se vašim návštěvníkům vyplňuje formulář. To přímo souvisí s uživatelskou zkušeností (UX) – čím lepší UX, tím větší šance, že návštěvníci skutečně odešlou vyplněný formulář a stanou se vašimi zákazníky.

Jak input funguje na webu?

Když návštěvník klikne na vstupní pole, pole se aktivuje a objeví se v něm blikající kurzor. Uživatel teď může začít psát. Vše, co napíše, se uloží do tohoto pole a po stisknutí tlačítka „Odeslat" se všechna vyplněná data odešlou na server. Tam se zpracují – například vám přijde email s kontaktní poptávkou nebo se uživatel zaregistruje do systému.

Z technického pohledu je input součástí HTML – základního jazyka, kterým jsou weby napsané. V kódu vypadá jako jednoduchý element označený slovem „input". Programátoři k němu přidávají různé vlastnosti, které určují, jak se pole bude chovat. Například mohou nastavit, že pole je povinné k vyplnění, nebo že do něj lze zadat maximálně 50 znaků.

Pro vás jako majitele webu je důležité vědět, že správně nastavená input pole pomáhají návštěvníkům vyplnit formulář rychle a bez chyb. Moderní prohlížeče dokážou v některých polích automaticky doplnit informace – třeba vaše jméno nebo adresu, kterou už jste někdy dříve vyplňovali. To výrazně zrychluje celý proces. Kvalitně navržená vstupní pole jsou klíčovou součástí dobré uživatelské zkušenosti a přímo ovlivňují, kolik lidí váš formulář skutečně dokončí.

Základní typy input polí

• Text (text) – pro krátké texty

Nejběžnější typ vstupního pole určený pro krátké textové údaje. Používá se pro jméno, příjmení, název firmy nebo jakoukoliv krátkou informaci. Uživatel do něj může napsat prakticky cokoliv – písmena, čísla, speciální znaky. Pole nemá žádnou automatickou kontrolu, jestli zadaný údaj dává smysl.

• Email (email) – pro emailové adresy

Speciální typ pole optimalizovaný pro zadávání emailových adres. Prohlížeč automaticky kontroluje, zda zadaný text obsahuje zavináč a tečku na správných místech. Na mobilních telefonech se při kliknutí na toto pole automaticky zobrazí klávesnice s rychlým přístupem k zavináči a tečce, což výrazně usnadňuje psaní.

• Heslo (password) – pro hesla

Vstupní pole, které skrývá veškerý zadaný text za kolečka nebo hvězdičky. Používá se výhradně pro hesla a další citlivé informace, které nechcete, aby viděl někdo přes rameno. I když na obrazovce vidíte jen hvězdičky, skutečné heslo se normálně odesílá na server – proto je důležité, aby web používal šifrované připojení HTTPS.

• Číslo (number) – pro číselné hodnoty

Pole určené výhradně pro čísla. Na počítači se u něj obvykle zobrazují šipky nahoru a dolů, kterými můžete hodnotu zvyšovat nebo snižovat. Na mobilních telefonech se automaticky otevře číselná klávesnice místo běžné abecedy. Používá se pro věk, množství, cenu nebo jakékoliv jiné číselné údaje.

• Telefon (tel) – pro telefonní čísla

Pole optimalizované pro zadávání telefonních čísel. Na mobilních zařízeních se při kliknutí automaticky zobrazí numerická klávesnice, což významně usnadňuje psaní. Pole samo o sobě nekontroluje platnost čísla – jen umožňuje pohodlnější zadání.

• Datum (date) – pro výběr data

Moderní typ pole, které místo ručního psaní nabídne grafický kalendář. Návštěvník prostě klikne na požadované datum místo toho, aby musel psát „15.3.2025". To eliminuje chyby a výrazně zrychluje vyplňování formulářů, kde potřebujete znát datum – třeba při rezervaci služby nebo objednávce s termínem dodání.

• Checkbox – zaškrtávací pole

Malé čtverečky, které lze zaškrtnout nebo odškrtnout. Používají se pro souhlas s podmínkami, volbu více možností najednou nebo zapnutí/vypnutí nějaké funkce. Uživatel vidí popis a vedle něj čtvereček – kliknutím se zobrazí fajfka. Běžně se používají pro GDPR souhlas se zpracováním osobních údajů.

• Radio button – výběr jedné možnosti

Kolečka umožňující vybrat právě jednu možnost ze seznamu. Na rozdíl od checkboxů, kde můžete zaškrtnout více položek, u radio buttonů můžete vybrat pouze jednu. Používají se například pro výběr způsobu doručení, platby nebo jiných variant, kde musí uživatel zvolit právě jednu možnost.

Důležité atributy input polí

• Placeholder – nápověda přímo v poli

Světle šedý text, který se zobrazuje uvnitř prázdného vstupního pole jako nápověda. Například pole pro email může obsahovat placeholder „vas@email.cz". Jakmile začnete psát, nápověda zmizí. Placeholder pomáhá návštěvníkům pochopit, co do pole mají zadat a v jakém formátu. Pozor ale – placeholder není náhrada za popisek pole.

• required – povinné pole

Atribut, který označuje pole jako povinné k vyplnění. Pokud se uživatel pokusí odeslat formulář s prázdným povinným polem, prohlížeč ho na to upozorní a formulář neodešle. Uživatelé obvykle poznají povinná pole podle hvězdičky nebo slova „povinné" u popisku.

• maxlength – maximální počet znaků

Určuje, kolik znaků maximálně lze do pole napsat. Například pole pro poznámku může mít limit 500 znaků. Jakmile uživatel dosáhne limitu, další psaní není možné. To chrání databázi před příliš dlouhými texty a nutí uživatele být struční.

• pattern – požadovaný formát

Pokročilý atribut umožňující definovat přesný formát, ve kterém musí být údaj zadán. Například můžete vyžadovat telefonní číslo v konkrétním formátu „+420 XXX XXX XXX" nebo PSČ s mezerou uprostřed. Pokud uživatel zadá údaj v jiném formátu, prohlížeč ho na to upozorní.

• autocomplete – automatické doplňování

Atribut říkající prohlížeči, jestli má v poli nabízet automatické doplňování z dříve zadaných údajů. U běžných polí jako jméno, email nebo adresa je autocomplete velmi užitečné – prohlížeč předvyplní údaje, které jste už někdy zadávali, a vy je jen potvrdíte.

Proč je správný input důležitý pro uživatele

Kvalitně navržená vstupní pole jsou základem dobré uživatelské zkušenosti. Když je formulář snadný a příjemný na vyplnění, návštěvníci ho skutečně dokončí a odešlou. Naopak špatně navržená pole vedou k frustraci – uživatelé formulář opustí, aniž by ho dokončili, a vy přijdete o potenciální zákazníky.

Správný typ inputu výrazně usnadňuje vyplňování. Když použijete email pole místo obyčejného textového, uživatelé na mobilech dostanou klávesnici s rychlým přístupem k zavináči. Když použijete number místo text, zobrazí se jim číselná klávesnice. Tyto drobnosti dělají obrovský rozdíl v pohodlí vyplňování, zvlášť na mobilních zařízeních, odkud dnes přichází většina návštěvníků.

Input pole hraje důležitou roli i v přístupnosti webu. Lidé používající čtečky obrazovky nebo navigující klávesnicí potřebují správně označená a strukturovaná pole, aby vůbec mohli formulář vyplnit. Responzivní design zajišťuje, že vstupní pole vypadají dobře a fungují správně na všech zařízeních – od velkých počítačových monitorů po malé displeje mobilních telefonů.

Časté chyby u input polí

• Používání text pole na všechno

Častá chyba začátečníků je použít všude obyčejné textové pole. Pro email používejte email typ, pro telefon tel typ a pro datum date typ. Každý speciální typ přináší výhody v podobě automatických kontrol, lepších mobilních klávesnic a celkově lepší uživatelské zkušenosti.

• Chybějící nebo nejasné popisky

Pole bez viditelného popisku nebo jen s placeholderem zmate uživatele. Popisek by měl být vždy viditelný nad polem nebo vedle něj – ne jen jako placeholder uvnitř, protože ten zmizí, jakmile začnete psát. Jasný popisek říká, co do pole patří.

• Příliš mnoho povinných polí

Každé povinné pole navíc snižuje pravděpodobnost, že uživatel formulář dokončí. Ptejte se pouze na informace, které skutečně potřebujete. Pokud nevíte, co si s údajem počnete, proč byste ho vůbec chtěli?

• Nezřetelné chybové zprávy

Když uživatel zadá špatný údaj, musí okamžitě vidět, kde je chyba a co má udělat jinak. Chybová hláška „Formulář obsahuje chyby" bez dalšího vysvětlení pomůže jen minimálně. Dobrá chybová zpráva je konkrétní a zobrazí se přímo u problematického pole.

• Špatná optimalizace pro mobily

Pole příliš malá na kliknutí prstem, nedostatečný prostor mezi poli nebo nečitelný text. Více než polovina uživatelů přichází z mobilů, takže formuláře musí být navrženy primárně pro dotykové ovládání.

Best practices pro input pole

• Zobrazujte validaci v reálném čase

Místo čekání na odeslání celého formuláře kontrolujte pole průběžně, jak uživatel píše. Jakmile opustí pole s emailem, okamžitě mu ukažte, jestli je email v pořádku nebo ne. Tato okamžitá zpětná vazba pomáhá opravit chyby ještě před odesláním.

• Seskupujte související pole

Pokud máte delší formulář, rozdělte ho do logických sekcí. Osobní údaje k sobě, fakturační adresa k sobě, způsob doručení zvlášť. Každá sekce by měla mít nadpis vysvětlující, co následuje. Toto seskupení pomáhá uživatelům mentálně zpracovat, co po nich chcete.

• Poskytněte okamžitou zpětnou vazbu

Když uživatel úspěšně vyplní pole nebo naopak udělá chybu, dejte mu okamžitě vědět. Zelené zaškrtnutí u správně vyplněného emailu nebo červená ikonka s jasnou hláškou u chyby. Tato okamžitá zpětná vazba buduje důvěru.

• Optimalizujte pro mobily

Vstupní pole musí být dostatečně velká na snadné kliknutí prstem – minimálně 44x44 pixelů. Text musí být čitelný bez přiblížení. Mezi poli musí být dostatek prostoru, aby uživatel omylem neklikl vedle. Používejte správné typy polí, které vyvolají vhodnou mobilní klávesnici.

• Používejte jasné popisky

Každé pole musí mít viditelný popisek, který jasně říká, co do pole patří. Popisek by měl zůstat viditelný i po začátku psaní – nezávisejte pouze na placeholderu. Pro čtečky obrazovky propojte popisek s polem pomocí atributu label.

• Umožněte snadnou opravu chyb

Nikdy nemažte data, která uživatel vyplnil. Pokud dojde k chybě při odesílání, formulář by měl zůstat vyplněný, aby uživatel mohl opravit jen problematické pole. Nic není frustrující více než vyplnit formulář znovu od začátku.

Související pojmy