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;} <textarea cols="7" rows="2"></textarea> | |
|
| .ta2, .ta3, .ta4 {width: 88px; height: 50px; margin: 0; padding: 0;} .ta2 {color: #a00;} | |
|
| .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ů.
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.
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. Navíc nad a pod prvkem v IE6, IE7 a v Chrome a Safari pod prvkem je zbytečný prázdný prostor, který element zabírá. IE8 takový volný prostor již nevyžaduje. Nastavení margin: 0; které pomohlo u textboxu tento volný prostor neodstraní.
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. Nová verze Opery již nemá trvale zobrazenou svislou rolovací lištu a všechny elementy mají nyní stejný rozměr i vzhled.
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í/schování rolovací lišty nastane i v okně 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" 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".
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.
Omezení délky textu pomocí atributu maxlenght v případě tohoto elementu není možné. Abychom zabránili vtipálkům, kteří nakopírují megabajty textu musíme použít JavaScript. Osvědčilo se mi provést kontrolu až na serveru, kde zkrátím dlouhý text např. na 2 kb a přidám na konec text (...zkráceno).
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 Safari a Chrome si může uživatel nastavit podle potřeby uchopením za pravý dolní roh a tažením myší. Zda je to dobře nebo ne, nevím.
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.02.2009