Form element <textarea> and CSS
Form element textarea is used for longer, multiline text, usually unlimited length. In intranet that element is used mostly for comment on events, laboratory analysis note etc. it means not structured data.
Screenshots of form element textarea are only illustration of style, not full-range collection of all possibility of using style. Test was done in standard XHTML mode. Code used for styling of screenshots first.
<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;}
Style of each row of screenshots is explained next.
Screenshots of element without any CSS, only with using attributes for setting proportions of textarea differentiate. Attribute cols determine width element according to "average width" of characters of used font. Evidently each browser calculate this average width otherwise. Approximate agreement holds only for IE and Opera. FireFox set highs one row more than was asked for. Attributes cols and rows perhaps are not applicable for cross browser solution.
Element sizing by the help of CSS properties unify proportions somewhat better. Small differences are due to different default border and padding, what is in line with W3C box model. Around element in some browsers remain void space. For Safari is displayed element which has focus.
Next we will proceed from outsides. Element textarea is inserted into container, which has fixed width. CSS properties margin, border and padding of element are set to zero, not to affected W3C box model and set-up the width element to width: 100%;. Void space above and below element in some browsers is removed by using style property float: left;. By using property background element look is switched-over to type classic known from Win2000.
Final look of element textarea now has uniform appearance and size in all tested browsers. Border is now provided by container (div, td) and border is fully under control of designer.
The last row of screenshots outlines property overflow, which should control the display of vertical and horizontal scrollbars. Setting overflow: auto; causes, that scrollbars appear only when needed. After all free lines are filed up by text, vertical scrollbar is turned on and text is reformated so that was not hidden under scrollbar. All browsers act like that except Opera. There is no way how to remove vertical scrollbar in Opera.
Setting overflow-y: scroll; is not according to W3C standard, but ensures permanent display of vertical scrollbar. Then it is not necessary to reformat text at utilization all free lines.
Sometimes very long word (e.g. link address) need to be entered. When such a long text (without space or line break) is longer than the row width some problem may appears. IE and Safari break that long word on the border of letter, Firefox and Opera retain long word not broken and display horizontal scrollbar. When property overflow-x: hidden; is set-up FireFox does not display horizontal scrollbar and the right part of that long word becomes inaccessible for edit. Opera displays horizontal scrollbar even over this restriction.
Text inside of the last example is not syntactic correct. When text is correct overflow-y:scroll;, browsers mostly understand dash as hyphen and then breaks the text into two lines. Purpose of example is different working with word longer than row.
The size of element textarea in Safari user can set-up according to needs. It is possible to drag the handle in lower right corner of emement by mouse. Whether it is good or bad I don't know.
Comments on usage of element textarea
Entry of text in the form element textrea may be done in two modes. First mode is programmer's mode, or typewriter like style, when user breakes each line by Enter key. Second mode is text processing like, when line breaks user lets make the system and Enter key is used only when new paragraph is desired.
Though the same text entered in either mode distinguishes in count of "carriage return", later on displayed text e.g. in element <div> or <p> is reformated and looks the same. That is due to HTML rules, where char carriage return is substituted by space. When first mode input text format is to be preserved, then output text should be embedded in element <pre>.
There is no such an attribute like maxlenght in this element. To prevent joker, who copy mega bytes of text into textrea, some limitation is necessary. It proved to me to make limitation on server just before text save to database. If text is longer than e.g. to 2 kb, then text is cut and note "(..shorten)" is appended.
Here is one code tip for element textarea, which is from time to time wrong published. First code example add opening and closing carriage return characters to original text. Multiple edit and save the some record extend more and more blank lines.
<form > ... <textarea name="wrong"> database text to edit </textarea> <textarea name="good">database text to edit</textarea> ... </form>
updated 23.12.2007