Things To Do With Textarea Form Fields

The primary function of a textarea field is to accept input from a form user for the form processing script to do stuff with. You see their use in feedback forms, for example.

Another Common Use

Another use of the textarea field is to present text, such as program source code, for easy copying. We use this in many of our articles and blog entries. See / for an example. (If no current blog entries contain source code in a textarea field when you arrive, click on the "[MORE ENTRIES]" link at the bottom of the page and then click on likely blog entry titles.)

Automatically Selecting Content

Notice that the content in textarea fields published in the above blog entries is automatically selected when you click it. To make that happen, we use the following attribute in the <textarea...> tag:

onclick="javascript:select()"

Specifying Text Style, Wrap Characteristics, and Read Only

We also use attributes to specify the text style, turn wrap off, and to make the content read only. Here is an example copied from the "Removing Non-Digit Characters" blog entry:

<form>
<textarea 
   cols="44" 
   rows="2" 
   onclick="javascript:select()" 
   style="font-family: monospace; font-size: 12px;" 
   wrap="off" 
   readonly="yes">
$value =~ s/\D//g;
</textarea>
</form>

(The wrap="off" attribute can be important when presenting programming code. Some code, such as JavaScript, is line break sensitive.)

Bold Text and Text/Background Colors

Whether used for accepting user input or for providing text for copying, the textarea field can be formatted in several ways.

To make the text bold, add a "font-weight" definition to the style attribute. To change the text color, add a "color" definition. For background color, add a "background-color" definition.

This make a yellow background for bolded red text, 16 pixels in size:

<form>
<textarea 
   cols="22" 
   rows="5" 
   style="
      font-size:        16px; 
      font-weight:      bold; 
      color:            red; 
      background-color: yellow;" 
    wrap="off">
</textarea>
</form>

Red text on a yellow background is not very attractive for some implementations. Try sky blue on silver. Any web color combinations are available to you.

Textarea Field With Background Image

Background images can be put into textarea form fields.

Here, the image is a photo of the author, placed once (not repeated), and centered in the textarea field. The text is white, 44 pixels in size, and the background is black:

<form>
<textarea 
   cols="15" 
   rows="5" 
   style="
      font-size:           44px; 
      color:               white; 
      background-image:    url(http://flowto.info/will.jpg); 
      background-repeat:   no-repeat;
      background-position: center; 
      background-color:    black;" 
    wrap="off">
</textarea>
</form>

Add a

readonly="yes"

attribute, and nobody can type onto the photo's generous black frame :)

Will Bontrager