Pokud od lidí potřebujete určitou informaci a jediným způsobem je, že jí musí ručně zadat, můžete k tomu využít textové políčko.
Textové políčko je základním prvkem formulářů, ve kterých mají lidé ručně (typicky s využitím klávesnice) zadat určité informace – ať už jde o jeden řádek nebo delší text.
Jak vypadá
- Vychozí podoba textového políčka se liší podle platformy – typicky jde ale o obdelník (nebo zaobledný obdelník) s okrajem a bílým pozadím
- Textové políčko je vždy doplněno o popisek, který funguje jako vysvětlení, co má člověk zadat za informaci.
- Samotné políčko pak může obsahovat doplňující informaci o tom, v jaké podobě (případně jakou informaci) má člověk zadat (tzv. placeholder).

V rámci formulářů se můžete pak setkat také s políčkem pro psaní delších textů, tzv. textovou oblastí (textarea).

Stavy
Běžné textové pole v podstatě nemá žádné stavy. Je ale potřeba myslet na to, že s nimi lidé interagují – je tedy mnohdy užitečné odlišit políčko, do kterého lidé mohou aktuálně psát (například orámováním).

Typy polí
V dnešní době různých zařízení můžete lidem usnadnit zadávání volbou vhodného typu pole, které například:
- Na chytrých telefonech automaticky nastaví vhodnou klávesnici.
- Na počítači omezují hodnoty v automatickém našeptávání na pouze na ty v požadovaném (očekávaném) formátu.
Zvolit si můžete z těchto polí:
Typ | Co se stane |
Text | ![]() Klávesnice je nastavena na vkládání libovolného textu. Na počítači vypadá jako běžné pole. |
Číslo | ![]() Klávesnice je nastavena na psaní čísel. Na počítači vypadá jako běžné pole, na levo mále ale šipky pro posun čísla bez nutnosti psát a zároveň je možné používat šipky pro zvyšování/snižování hodnoty. |
URL adresa | ![]() Klávesnice zobrazí pomocné znaky bez nutnosti přepínat do speciálních znaků, např. lomítko. Na počítači vypadá jako běžné pole. |
![]() Klávesnice zobrazí pomocné znaky bez nutnosti přepínat do speciálních znaků, např. zavináč. Na počítači vypadá jako běžné pole. | |
Datum | ![]() Na mobilu se zobrazí jiný typ výběru, než na klasickém počítači. Zobrazení záleží na platformě, ale vždy to bude možnost bez nutnosti cokoliv psát. Na počítači je hodnota automaticky formátovaný, je možné používat šipky pro změnu hodnot a je možné zobrazit nativní date picker. |
Čas | ![]() Na mobilu se zobrazí jiný typ výběru, než na klasickém počítači. Zobrazení záleží na platformě, ale vždy to bude možnost bez nutnosti cokoliv psát. Na počítači je hodnota automaticky formátovaný, je možné používat šipky pro změnu hodnot. |
Vyhledávání | ![]() Změní akci pro odeslání formuláře na ikonku lupy. Na počítači vypadá jako běžné pole. |
Telefon | ![]() Klávesnice je nastavena na psaní čísel a speciálních znaků používaných v telefonních číslech. Na počítači vypadá jako běžné pole. |
Všechny typy polí vypadají téměř shodně co se týče formy. Na webu ale nabízejí doplňkovou funkcionalitu, například předvyplnění pole vhodným formátem, ve kterém mají lidé informace zadat.
Reference
- Kniha Web Form Design
- Kniha Forms that work
- Entry Controls v knize About Face 3