Multiline Text in HTML

Multiline text controls enable the user to input several lines of text - the Windows equivalent is the memo control. The basic HTML code for creating such controls is

<textarea>
   Contained text...
</textarea>

Text areas have some attributes that can be used, in a limited manner, to influence their behavior whilst others are shared with all element types.

The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
The id attribute is discussed here.
The events available across all three browsers - Firefox, Opera and IE - are discussed here.
The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.
disabled: To set the textarea in an initially disabled state use disabled="disabled".
name: When embedded inside a form the name attribute should be assigned so the contents of the textarea get shipped off to the server side script assigned in the action attribute of the form.
readonly: The code readonly="readonly" stops user edits of the information in the element.
wrap: This is a non-standard attribute but one which is correctly interpreted by all three browsers. It can take one of three values
- wrap="soft": This is the default setting. It causes text typed into the control to be broken at a space, ASCII 32, character and wrapped onto the next line. However, this is only for presentation purposes - the form data shipped off to the server-side processing script contains no line breaks other than those entered by the user.
- wrap="hard": With this setting the line breaks added for presentation are preserved and shipped to the processing script.
- wrap="off": This causes a horizontal scrollbar to appear as soon as the client width of the control becomes insufficient to display typed text.
Pre IE6 the rather quirky terms "virtual" and "physical" were used in place of the far more logical ones "soft" and "hard". Textarea controls are nowhere as sophisticated as a wordprocessor. If the text contains no spaces wrapping will not occur - no matter what the wrap setting.

Textareas have additional attributes, col and row intended to define the dimensions of the control. In our view it is best to style these elements, and all others, using CSS rather than relying on these attributes. Textareas, unlike input controls typed to "text", do not have a maxlength property. This is a particularly unfortunate omission since it can result in excessive server-side traffic. We present a simple means of controlling the maximum length of user entries in textarea controls below. However, it should be pointed out that the technique relies on JavaScript being enabled on the browser. One should allow for users who might disable JavaScript and also for those with malicious intent who might try try to bombard the server with traffic by directly calling the server-side script to be executed. This is best done by checking the size of data received before processing the server-side script.

Type text below

32 Characters Left

Here is the code used to create the example above

<html>
   <head>
      <script>
         function LimitText(AId,BId)
         {
          var e1 = document.getElementById(AId);
          var e2 = document.getElementById(BId);
          var l1 = e1.value.length;
          (l1 > 32)?e1.value = e1.value.substring(0,32):e2.innerHTML = 32 - l1 
         }
      </script>
   </head>
   <body>
      <form>
        <label>Type text below</label>
        <textarea id="mtext" onkeyup="LimitText('mtext','cleft')" onblur="LimitText('mtext','cleft')"></textarea><br>
        <label id="cleft" style="color:red;font-weight:bold">32</label>
        <label style="color:red;font-weight:bold"> Characters Left</label>
      </form>
   </body>
<html>

It should be noted that we run the LimitText function on the onblur as well as the onkeyup events. This is in order to prevent the user from bypassing the maxlength limitation by simply pasting text into the control using a right mouse click. We choose to do this rather than code the onpaste event since it is not supported by Opera or Firefox. This way the user may well succeed in pasting in vast amounts of text. However, he/she cannot send it back for server-side processing without blurring the textarea control so the method is failsafe.

Textarea controls, despite their appearance, are displayed inline by default. Consequently, one must either change the CSS display type setting or code in explicit line breaks - as we have done here.

A final injunction:client-side monitoring of the length of text entered into a textarea control is useful but should not be relied upon. There will always be those who attempt to bypass the length checks by building the processing script url directly and sending it to the server. Naively processing such urls can seriously erode bandwidth on your webserver. Therefore, you should institute server-side checks before processing the script. On this site we process requests coming from the Live Test page by running the simple PHP script given below

<?php
 $data = $_POST['html'];
 if (strlen($data) < 1024) echo $data; else echo '<b>Code too long</b>';
?>

▼Jump To...

◄ ►