Formulářový element - textarea a CSS
Formulářový prvek textarea je používán pro delší 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, bez předem stanovené struktury.
Screenshoty formulářových elementů textarea jsou jen ukázkou stylování, nikoli vyčerpávající sbírka všech možností použití stylů. Testování probíhalo ve standardním módu XHTML. Nejdříve kód použitých stylů pro získání screenshotů.
<textarea cols="12" rows="2"> ... </textarea>
.dimensions {width: 100px; height: 50px;}
.background {width: 100%; height: 50px; background: #ffa;
border: none; margin: 0; padding: 0;
float: left; overflow: auto;}
.overflow {width: 100%; height: 50px; background: #ffa;
border: none; margin: 0; padding: 0;
float: left; overflow-y: scroll;}
Zobrazení bez nastavené CSS třídy, jen s použitím atributů určujících velikost elementu textarea se docela liší. Atribut cols určuje šířku elementu podle "průměrné" šířky znaků použitého fontu. Zřejmě každý browser tuto průměrnou šířku počítá jinak. Přibližná shoda platí jen pro IE a Operu. FireFox nastaví výšku o jeden řádek více než je požadováno. Atributy cols a rows asi nejsou použitelné pro cross browser řešení.
Stanovení rozměrů pomocí vlastností CSS sjednotí rozměry poněkud lépe, ale stejný prvek má vlivem různých rámečků přece jen rozdílné rozměry, což je ve shodě s W3C box modelem. Navíc okolo prvku v IE a v Safari je zbytečný prázdný prostor. Na ukázce je způsob jak Safari zobrazuje element který má fokus.
Dále budeme postupovat z vnějšku. Element textarea vložíme dovnitř konteineru, kterému zafixujeme šířku. CSS vlastnosti margin, border a padding nastavíme na nulu, tak aby neovlivnily W3C box model a nastavíme šířku elementu na width: 100%;. Prázdný prostor nad a pod prvkem v některých browserech odstraníme použitím vlastnosti stylu float: left;. Použitím CSS vlastnosti background přepneme vzhled na typ klasik známý z Win2000.
Výsledný element textarea má nyní jednotný vzhled i rozměr ve všech testovaných browserech. Rámeček zajistí konteiner (div, td) a je nyní plně pod kontrolou designera.
Ukázka vlastnosti overflow, která má řídit zobrazování vertikální a horizontální rolovací lišty. Nastavení overflow: auto; způsobí, že rolovací lišty se objeví jen když je potřeba. Tak se chovají všechny browsery kromě Opery, která má svislou lištu zobrazenu stále. Ostatní prohlížeče zobrazí lištu až po vyčerpání volných řádků a pak přeformátují text tak, aby nebyl skrytý pod rolovací lištou.
Nastavení overflow-y: scroll; sice není standard podle W3C, ale zajistí trvalé zobrazení svislé rolovací lišty. Pak není nutné přeformátování textu při vyčerpání volných řádků.
Problém je s textem delším než šířka řádku, který není přerušen mezerou (např. adresa odkazu). V tomto případě IE a Safari zlomí text dlouhého slova na hranici písmene, Firefox a Opera ponechá dlouhé slovo a zobrazí vodorovnou rolovací lištu. Když přidáme overflow-x: hidden; nemá to vliv v IE a Safari, ale FireFox při dlouhém slově neumožní narolovat skrytý text protože chybí vodorovná lišta. Opera zobrazí vodorovnou lištu i přes tento zákaz.
Text uvnitř poslední ukázky není syntakticky správný. Když je použito správné overflow-y:scroll;, většinou browsery chápou pomlčku jako rozdělovací znaménko a pak rozdělí text na dva řádky. Cílem ukázky je rozdílné zacházení se slovem delším než řádek.
Velikost elementu textarea v Safari 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.
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. Kdybychom chtěli zachovat formátování zapsané prvním režimem, museli bychom výstupní text uzavřít do prvku <pre>.
Pomocí fontu Courier (Monospace) v prvním režimu zápisu textu je možné pomocí mezer a nových řádků naformátovat i jednoduchou tabulku s dodatečnými výsledky. Takový režim textarea byl použit pro poznámky v aplikaci Laboratoř.
Omezení délky textu pomocí atributu maxlenght v případě tohoto elementu není možné. Abychom zabránili vtipálkům, kteří nakopírují mega bajty textu nějaké omezení bude nutné. 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).
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ý kód prvku textarea zapisujte do jednoho řádku.
<form > ... <textarea name="chybne"> editovaný text z databáze </textarea> <textarea name="spravne">editovaný text z databáze</textarea> ... </form>
updated 29.11.2007