site logo

Formulářový element - input type="text" a CSS

Formulářový prvek <input type="text" ... />, občas zkráceně nazývaný textBox je nejčastěji používaný element ve formulářích. Používá se pro vkládání krátkých, jednořádkových textů (jména, názvy, čísla, datumy). Jeho ovládnutí pomocí CSS sice není triviální, ale proti ostatním formulářovým prvkům je asi nejjednodušší.

Následuje živý formulář doprovázený použitým HTML a CSS kódem. Zobrazení formuláře závisí na aktuálně použitém browseru. Pro porovnání jsou dále uvedeny screenshoty tohoto formuláře z běžně používaných browserů. Ukázky nejsou vyčerpávající výukou stylování prvku textBox, ale spíš postup jak odstranit rámečky okolo tohoto prvku a dosáhnout jednotných rozměrů tak, aby element byl použitelný v kompaktních formulářích.

input {font: normal 13px Arial, SansSerif;};
<input type="text" size="7" value="textBox">
<input type="text" size="7" value="textBox" disabled>
.tx1, .tx2, .tx3, .tx4 {width: 88px; height: 18px; margin:0; padding: 0;}
.tx1 {color: #f00;}
.tx2 {padding: 0 1px 0 0; color: #00c; border: 1px solid #00c;}
.tx3 {padding: 0 1px 0 0; background: #ffa;}
.tx4 {padding: 0 1px 0 0; background: #ffa; border: 0;}

Na sreenshotu vlevo je textbox ve Windows7, ostatní ukázky jsou z Windows XP. Vzhled formuláře závisí na nastaveném motivu Windows, pro IE lze vynutit zobrazení ve stylu klasik v libovolném motivu (menu IE: Nástroje / Možnosti Internetu / Upravit / Povolit styly zobrazení...). Zde najdete ukázky ze starších browserů.

screenshot: formulářový prvek input type=text v různých browserech

Pro defaultní zobrazení textBoxu, je šířka určena atributem size="7", což má odpovídat sedmi "průměrným" znakům v textboxu. Různé výsledné šířky textBoxu jsou patrné ze screenshotů, atribut size tedy není vhodný pro přesné určení šířky elementu. Použitý font v případě formulářových elementů není zděděn, proto musí být deklarován samostatně, buď pro prvek input, nebo pro třídu kterou má daný prvek přiřazenu.

Dále je zobrazen textBox ve stavu disabled opět v defaultním zobrazení. Chrome a Safari mají okolo prvku "prázdný" prostor, který je díky defaultnímu nastavení margin. Pokud explicitně nastavíme margin: 0; tento prázdný prostor zmizí, nikoli však u brovserů IE6 a 7, tam je nutné použít styl float: left;.

Další řádky screenshotu zobrazují element upravený pomocí CSS. Červené elementy upozorňují na chyby typu mizející textový kurzor při pravém okraji prvku. Ten mizí v browserech IE a Opera při textu dlouhém přes celou šířku elementu, nebo při zarovnání textu v elementu vpravo a pozici textového kurzoru zcela vpravo. Ve FireFoxu za podobných podmínek zmizí textový kurzor také, ovšem na předposlední pozici v textu. Správný textový kurzor je viditelný v Chrome a Safari. Příčinou mizení textového kurzoru je nastavení padding: 0; které je někdy doporučováno v tzv. CSS reset. To napravíme pomocí padding: 0 1px 0 0;  tak, aby se na pravé straně prvku vytvořil prostor pro textový kurzor. Ve FireFoxu ovšem chyba zůstane.

Browser Chrome a Safari jsou zobrazeny s textBoxem, který má focus. Vidíte hnědý, nebo modrý rámeček okolo aktivního prvku formuláře. Aktivní může být v jeden okamžik pouze jeden prvek formuláře, a to je ten do kterého je směrovám text z klávesnice. Jak dosáhnout podobného efektu i v ostatních moderních browserech najdete v článku formuláře souhrn.

Zelený element má již odstraněny zmíněné nedostatky, textový kurzor je stále viditelný, prvky zabírají stejnou výšku i šířku v testovaných browserech a prvky mají jednotný zelený rámeček.

Další řádek screenshotů ukazuje použití CSS vlastnosti background. Nastavení barvy pozadí způsobí, že je vzhled prvku přepnut do podoby klasik (to platí nejen pro textBox). Zobrazení specifické pro nastavený motiv Windows se v tomto případě vypne.

Poslední řádek je "nahý" formulářový element textBox, stejný ve všech testovaných browserech. Mají stejný rozměr a textový kurzor je stále viditelný bez ohledu na zarovnání textu, nebo vyčerpání šířky elementu. Takový prvek lze vložit do obálky (kontejneru), která bude mít design podle vašich potřeb a představ.

Živou ukázku zasazení upraveného prvku textBox do layoutu formuláře najdete v článku formuláře souhrn, postup výpočtu rozměrů elementu najdete v článku box model formulářů.

Atributy elementu <input type="text">

<input type="text" name="..." value="..." size="10" maxlength="20">

type="text" je povinný atribut pro tento typ formulářového elementu.

name="..." atribut name je povinný a musí být naplněn unikátním jménem ve formuláři. Neuvedení atributu name zapříčiní že obsahu elementu nebude odeslán. Někdy se tento atribut plete s nepovinným atributem id="...", protože je dobrým zvykem pro oba atributy používat stejná jména. Atribut id potřebujeme jen když se na element odkazuje JavaScript.

value="..." tento atribut použijeme při editování záznamů z databáze. Value naplníme údajem z databáze a tak obnovíme hodnotu, která byla naposledy odeslána formulářem ke zpracování. Pokud je hodnota value delší než předepsaný atribut maxlength, FireFox a Safari zobrazí jen povolený počet znaků, IE a Opera zobrazí znaky všechny, ale obsah můžeme jen mazat dokud nedosáhneme předepsaného počtu znaků.

size="10" starší způsob jak nastavit velikost formulářového prvku. V ukázkách jsme viděli, že tento atribut nezaručí stejnou velikost v různých browserech protože počítá s tzv. průměrnou šířkou znaku a tento termín není jednoznačně definován. Výhodnější pro stanovení velikosti je použít odpovídající vlastnosti CSS.

maxlength="20" tímto atributem omezíme maximální počet znaků, které lze vložit do textového políčka. Po dosažení maximální délky již nelze vkládat další znaky, ale to není nijak indikováno což je poněkud matoucí pro začínajícího uživatele.

disabled je další nepovinný atribut. Způsobí zešednutí textu a vyjmutí takto označeného prvku ze seznamu formulářových prvků odesílaných na server. Obsah prvku nelze editovat. V XHTML je doporučeno zapisovat disabled="disabled".

readonly zabrání editování obsahu prvku, ale obsah prvku je odeslán na server. Tento stav není indikován (kromě Safari, kde vypadá podobně jako disabled). Browsery Chrome Safari a Opera neumožňují umístit textový kurzor do textboxu, který je označen jako readonly. IE a FF dovolí umístit textový kurzor do readonly texboxu a pohybovat se v textu kuzorovými klávesami a navíc při zmáčknutí klávesy backspace IE přejde na předchozí stránku. Očekávané chování textboxu ve stavu readonly tak splňuje pouze Safari.

Tato stránka je přepnutá do standardního módu, tak aby box model v browserech IE pracoval podle W3C box modelu. Pokud budete stylovat formuláře, nezapomeňte v úvodním prologu uvést správný doctype.

updated 04.03.2010