site logo

Formulářový element - textarea a CSS

Formulářový prvek textarea je používán pro delší, víceřádkové texty, obvykle předem neznámého rozsahu. Na intranetu jsou to většinou komentáře k události, laboratornímu rozboru ap. tedy nestrukturovaná data.

Následuje ukázka živých elementů doplněná použitým HTML a CSS kódem. Dále najdete screenshoty z často používaných browserů. Takto je možné porovnat vykreslení elementů v aktuální verzi prohlížeče se screenshoty z jiných browserů.

textarea {font: normal 13px Arial, SansSerif; font-size:100%;}
<textarea cols="8" rows="2"></textarea>
.ta2, .ta3, .ta4 {width: 88px; height: 50px; margin: 0; padding: 0;}
.ta2 {color: #a00; resize: none;}
.ta3 {float: left; background: #ffa; border: 1px solid #00c; overflow: auto;}
.ta4 {float: left; background: #ffa; border: 0; overflow-y: scroll;}

Na sreenshotu vlevo je textarea ve Windows7, ostatní ukázky jsou z Windows XP. Vzhled elementu 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 textarea v různých browserech

Přirozené zobrazení, bez použití stylů CSS, jen s použitím atributů cols a rows pro určení velikosti elementu textarea je v prvním řádku screenshotů. Je jasné, že tyto atributy nelze použít pro sjednocení rozměrů prvku přes různé browsery. Použitý font musíme deklarovat pro formulářové prvky samostatně, nebo v CSS třídě, která je použita ve formulářovém elementu. Font se v případě formulářových elementů nedědí. Defaultní font pro textarea je obvykle typ monospace.

Firefox verze 3.6 v elementech textarea a input type="text" zobrazí předepsaný font chybně. Chyba se projeví jako proměnlivá velikost mezery mezi písmeny (letter-spacing/kerning). Tento bug odstraníme přidáním vlastnosti font-size:100%;  do CSS deklarace elementů textarea a input type="text". Tím se mezery mezi písmeny upraví.

Stanovení rozměrů pomocí vlastností CSS width a height sjednotí rozměry poněkud lépe, ale různá šířka rámečků způsobí rozdílné vnější rozměry, což je ve shodě s W3C box modelem. Defaultní šířka rámečku je ve Webkitu 3 pixely (jen pro textarea), ostatní browsery počítají 2 pixely. Pokud vyžadujeme totožné rozměry elementu v různých browserech, musíme explicitně nastavit i šířku rámečku.

Nyní sjednotíme šířku rámečku na 1 pixel a pomocí vlastnosti float: left; odstraníme prázdný prostor okolo elementu v IE6 a 7, Chrome a Safari. Starší verze Opery měly trvale zobrazenu svislou rolovací lištu, nyní od verze 9 je tento problém opraven. Elementy teď mají stejný rozměr i vzhled ve všech browserech.

Zobrazení svislé rolovací lišty nastane automaticky při vyčerpání posledního volného řádku. Rolovací lišta zabere jistý prostor, a tak dojde i k přeformátování textu. Toto náhlé přeformátování nemusí být vždy vítané. Odstraníme to předpisem na trvalé zobrazení svislé rolovací lišty: overflow-y: scroll;. V posledním řádku screenshotů je trvalá svislá rolovací lišta a odstraněný rámeček elementu.

Podobný problém objevení/skrytí rolovací lišty nastane i v okně celého browseru, kdy část obsahu stránky je nahrávána dynamicky a výška stránky je přibližně stejná jako výška okna prohlížeče (dynamická změna reklamy, slideshow různě vysokých obrázků). Centrovaná stránka pak poskakuje ve vodorovném směru. Trvalé zobrazení rolovací lišty pro okno browseru dosáhneme pomocí CSS: body {overflow-y: scroll;}. IE zobrazuje svislou rolovací lištu v okně vždy, ostatní browsery jen když je potřeba.

Atributy elementu <textarea>

<textarea name="..." cols="50" rows="8" maxlength="1000" disabled>...</textarea>

name="..." atribut name je podle W3C nepovinný, ale vynechání atributu name způsobí, že obsah takového prvku není odeslán na server ke zpracování. Měl by obsahovat unikátní jméno ve formuláři. Někdy se tento atribut plete s nepovinným atributem id="...", protože je dobrým zvykem pro oba atributy použít stejná jména. Atribut id potřebujeme jen když se na element odkazuje JavaScript v browseru.

cols="50" rows="8" podle W3C jsou povinné atributy. Pokud je vynecháte, bude se zlobit i W3C validátor stránek. V praxi jsou to atributy zbytečné, dávno překonané a nezaručují ani podobnou velikost elementu v různých browserech. Pro nastavení velikosti elementu je vhodnější použít kaskádové styly, které přepíší hodnoty těchto atributů, pokud jsou uvedeny z důvodu touhy po validní stránce.

Další nepovinný atribut je disabled. Způsobí zešednutí textu a vyjmutí takto označeného prvku ze seznamu prvků odesílaných na server. Atribut readonly  pouze zabrání editování obsahu prvku, tento stav není nijak indikován ale obsah prvku je odeslán na server. V případě XHTML kódu je správný zápis těchto atributů disabled="disabled", nebo readonly="readonly".

maxlenght="1000" je atribut definovaný pro textarea ve specifikaci HTML5. Funguje ve všech moderních browserech, kromě IE (včetně IE9). Použití je podobné jako v textboxu. Jakmile délka vkládaného textu dosáhne limitu podle atributu maxlenght, není již možné do elementu vkládat další znaky. Tento stav není vizuálně, ani jinak indikován. Omezit délku textu uvnitř elementu v browseru IE je možné jen pomocí JavaSkriptu.

Atribut placeholder="libovolný text". Uplatní se ve všech moderních browserech, mezi které nelze počítat žádnou verzi IE. Tento atribut je podle specifikace HTML5. Prázdný element zobrazuje zešedlý text podle atributu placeholder. Jakmile prvek získá fokus, text placeholderu zmizí.

Pro formulářový element textarea neexistuje atribut value, ale vlastnost value na kterou se lze odkázat pomocí JavaScriptu. Tento element je párový a obsah elementu se vkládá mezi otevírací a uzavírací značky.

Poznámky k použití elementu textarea

Zápis textu do formulářového prvku textrea může probíhat ve dvou režimech. První je režim psacího stroje (programátorský), kdy uživatel zalomí každý řádek klávesou Enter. Druhý způsob využívá zpracování textů, kdy zalomení řádku nechá uživatel na systému a klávesu Enter použije jen pro nový odstavec.

Stejný text zapsaný v obou režimech se sice bude lišit počtem znaků "nový řádek", ale texty zobrazené např. v elementu <div> jsou formátovány podle pravidel HTML, kde nový řádek je nahrazen mezerou a z více za sebou jdoucích mezer se uplatní jenom jedna. Kdybychom chtěli zachovat formátování zapsané prvním režimem, museli bychom text uzavřít do prvku <pre>.

Pomocí fontu Courier (Monospace), který bývá defaultně nastaven pro element textarea, lze zachovat formátování textu. Předpokládáme element vyplněný textem v režimu psacího stroje. Následně při výpisu textu do elementu <pre> jsou zobrazeny všechny mezery a nové řádky. Takový režim byl použit pro poznámky v aplikaci Laboratoř (pro formátování jednoduchých tabulek).

Problém je s textem delším než šířka řádku, který není přerušen mezerou (např. adresa odkazu). V tomto případě IE, Firefox, Chrome a Safari zalomí text dlouhého slova na hranici písmene a Opera ponechá dlouhé slovo a automaticky zobrazí vodorovnou rolovací lištu. Když přidáme overflow-x: hidden; a zakážeme vodorovnou rolovací lištu, nemá to vliv v IE a Safari, ale FireFox neumožní narolovat skrytý text dlouhého slova, protože chybí rolovací vodorovná lišta. Opera zobrazí vodorovnou lištu i přes tento zákaz.

Uvedu jeden tip pro prvek textarea, který je občas chybně uveden v různých návodech. První způsob zápisu přidá úvodní a závěrečny znak nový řádek k původnímu textu. Několikanásobné editování a uložení jednoho záznamu Vás může uvést do údivu odkud se berou znaky nových řádků. Celý HTML kód prvku textarea se vždy zapisuje do jednoho řádku.


<form >
...
<textarea name="chybne">
editovaný text z databáze
</textarea>

<textarea name="spravne">editovaný text z databáze</textarea>
...
</form>

Velikost elementu textarea v Chrome, Safari a FireFox4 si může uživatel nastavit podle potřeby uchopením za pravý dolní roh a tažením myší. Změnu velikosti můžeme zakázat pomocí CSS vlastnosti resize: none;. Tato možnost je použita ve druhém prvku živého ukázkového formuláře nahoře. Pokud potřebujete povolit změnu rozměru jen v určitém směru, použijte vlastnost resize: vertical , nebo resize: horizontal.

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 2011-03-26