HTML Textarea Basics

By Stephen Bucaro

A textarea is an html element used to create a multicolumn text input box. Shown below is the code for a basic textarea.

<textarea cols="32" rows="4"></textarea>

Note the attributes cols and rows. These attributes are basically used to set the size of the textarea.

cols sets the width of the text area based on the current font size
rows sets the height of the text area based on the current font size

Normally, you would want to put a label to indicate what kind of information should be typed into the textarea. You could simply put the label above the textarea as shown below.

<p>Comments:<br />
<textarea cols="32" rows="4"></textarea></p>

Comments:

Or, you could put the label to the left of the text area as shown below.

To accomplish this you could place the label text and the textarea within the cells of a table and then set the valign attribute of the first cell to top. The code for this is shown below.

<table><tr><td valign="top">Comments:</td><td>
<textarea cols="32" rows="4"></textarea>
</td></tr></table>

You could also use an html <label> element put the label as shown below.

<label for="ta1">Comments:</label><br />
<textarea id="ta1"></textarea>

If you use the html <label> element and set it's for attribute to the same value as the textarea's id attribute, then clicking on the label produces the same result as clicking on the textarea, e.g. the textarea receives the focus.

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse