Module 8 - Page 11 - The TEXTAREA Tag

The TEXTAREA Tag

The TEXTAREA tag creates a multiple-line text input field within a FORM; here is an example.

TEXTAREA requires three attributes: NAME, COLS, and ROWS. NAME names the TEXTAREA so that it can be accessed by the script, COLS determines the width of the TEXTAREA, and ROWS determines the height of the TEXTAREA. The TEXTAREA tag always closes.

Tag: TEXTAREA
Attribute: NAME
Value: any valid name (following the naming conventions outlined in previous modules)
Description: the NAME attribute of the TEXTAREA tag identifies the TEXTAREA so that it may be accessed by a script.

Tag: TEXTAREA
Attribute: COLS
Value: an integer representing the number of characters wide the TEXTAREA will be. As with the text INPUT, these characters are in the web browser's default monospace font (usually Courier or Courier New 10 point).
Description: the COLS attribute of the TEXTAREA tag sets the width of the TEXTAREA.

Tag: TEXTAREA
Attribute: ROWS
Value: an integer representing the number of lines of text tall the TEXTAREA will be.
Description: the ROWS attribute of the TEXTAREA tag sets the height of the TEXTAREA.

Example (abbreviated):

<textarea name="theMessage" cols="40" rows="4"></textarea>

Example (in context):

<html>
<head>
<title>TEXTAREA Tag</title>
</head>
<body>
<form>

<p>Tell me your life story:<br />
<textarea name="lifeStory" cols="40" rows="5"></textarea></p>

<input type="submit" value="Submit This Puppy" />
</form>
</body>
</html>

Again, here is the above example displayed.

You will note that there is no VALUE attribute assigned to TEXTAREA. The VALUE of a TEXTAREA is whatever text is placed between the opening and closing TEXTAREA tags.

Example (abbreviated):

<textarea name="lifeStory" cols="40" rows="5">Type your life story here...</textarea>

Example (in context):

<html>
<head>
<title>TEXTAREA Tag</title>
</head>
<body>
<form>

<p>Tell me your life story:<br />
<textarea name="lifeStory" cols="40" rows="5">Type your life story here...</textarea></p>

<input type="submit" value="Submit This Puppy" />
</form>
</body>
</html>

Here is the above example displayed. When the TEXTAREA tag was first created, it was felt that users might not understand that they needed to type into the TEXTAREA. It was common practice, therefore, to place some text between the opening and closing TEXTAREA tags to indicate where the user was to type; the user could replace this text with their own text, which would automatically become the new VALUE for the TEXTAREA. This functionality was soon discovered to be unnecessary; users automatically understood that they could type into the TEXTAREA. Today, no one pre-sets a value for the TEXTAREA in this manner.

Again, leave the TEXTAREA as an empty tag; always remember to close it, as shown in the first example.

Main Menu