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 textů jmen, názvů, čísel, datumů ap. Jeho ovládnutí pomocí CSS sice není triviální, ale proti ostatním formulářovým prvkům asi nejjednodušší.
Následuje kód pro získání screenshotů a obrázek výsledků podle jednotlivých browserů. Komentář vysvětlí jednotlivé kroky. Nejde se o vyčerpávající výuku stylování prvku textbox, ale postup jak odstranit rámečky okolo tohoto prvku tak, aby byl použitelný v kompaktních formulářích.
<input type="text" name="txt1" size="10" value="textBox" />
.error {width: 100px; margin:0; padding: 0; color: #f00; text-align: right;}
.okNow {width: 100px; height: 18px; margin:0; padding: 0 1px 0 0;
border: 1px solid #66f; float: left;}
.backg {width: 100px; height: 18px; margin:0; padding: 0 1px 0 0;
background: #ffa;}
.strip {width: 99px; height: 16px; margin:0; padding: 0 1px 0 0; border: 0;
background: #ffa; float: left;}
Pro defaultní zobrazení textBoxu, je šířka určena atributem size="10". Výsledek se liší v rozměru IE7, IE6 má velikost 95x24, FireFox 95x22, Opera 86x22 včetně přidaných okrajů, Safari 82x25 pixelů.
Druhý řádek ukázek upozorňuje na chybu typu mizející textový kurzor v prohlížečích IE a Opera. Když je nastaveno zarovnání textu vpravo, nebo při vyčerpání šířky textBoxu, textový kurzor u pravého okraje elementu zmizí. Příčinou je nastavení padding: 0;. To napravíme nastavením padding: 0 1px 0 0; tak, aby se na pravé straně prvku vytvořil prostor pro kurzor.
Když nastavujeme padding prvku textBox ve standardním módu, šířka musí být určena v pixelech a správně dopočítána tak, aby zbylo místo na nastavený padding. Např. nastavení width:100% proto aby prvek obsadil celou šířku konteineru způsobí chybu (jen v IE) a textový kurzor opět zmizí. Způsob dopočítání rozměru width v IE asi není dokonalý.
Jiný viditelný problém na druhém řádku je prázdné místo výšky 1px nad a pod prvkem v prohlížeči IE. Stejný prázdný prostor okupuje IE i u jiných formulářových prvků. To odstraníme nastavením vlastnosti float: left;.
Na třetím řádku jsou opraveny chyby. Všechny browsery vykreslí shodně element rozměru 103x20 px, 1px modrý rámeček a textový kurzor je stále viditelný. Na ukázkách sice kurzor nebliká, ale najdete jej ve všech prohlížečích.
Nyní nastavíme barvu pozadí a tím přepneme vzhled elemetu na podobu známou z Win2000. Shoda je uspokojivá, až na prázdný prostor okolo prvku v Safari a IE. Již víme, že vertikální prázdný prostor odstraníme nastavením vlastnosti float: left;, v případě Safari to pomůže jen částečně. Horizontální prázdný prostor zůstane a přesune se na pravou stranu.
Konečný výsledek je svlečený formulářový element textBox stejný ve všech testovaných browserech. Jednotný rozměr je zde 100x16 pixelů a textový kurzor je stále viditelný bez ohledu na zarovnání textu. Takový prvek lze vložit do konteineru, který bude mít design podle našich potřeb a představ.
Živou ukázku zasazení upraveného prvku do layoutu formuláře najdete v článku formuláře souhrn.
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 jménem unikátním 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.
Další nepovinný atribut je disabled="disabled". Způsobí zešednutí textu a vyjmutí takto označeného prvku ze seznamu prvků odesílaných na server. Atribut readonly="readonly" jen zabrání editování obsahu prvku. Tento stav není nijak indikován a obsah prvku je odeslán na server.
updated 29.11.2007