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.
| Comments: |
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.
Controlling the text in a textarea
Using the wrap attribute, you can control how text wraps when it reaches the end of the textarea box. In the latest versions of IE and FF, text wraps by default (of course this assumes that you have some spaces between words to implement a wrap). The wrap attribute isn't defined in the HTML 4.01 specification, but in the latest versions of IE and FF you can set the wrap attribute to off, which will cause the text to go beyond the end of the textarea box and a horizontal scrollbar to appear.
Shown below is the default text wrapping.
Shown below is the wrap attribute set to off.
<textarea cols="32" rows="4" wrap="off"></textarea>
Using the dir attribute, you can control the direction of text entry into the textarea. The default value of the dir attribute is ltr (left to right). Setting the dir attribute to rtl causes text to enter from right to left (when you enter a space, the input cursor annoyingly pops to the left of the text).
Shown below is the default text direction (type in some text).
Shown below is the dir attribute set to rtl.
<textarea cols="32" rows="4" dir="rtl"></textarea>
Disabling a textarea
Using the readonly or disabled attribute, you can prevent users from entering or modifying text in a textarea. The disabled attribute makes the fact that the user can't modify the contents of the textarea more obvious by graying it out.
Shown below is the readonly attribute set.
<textarea cols="32" rows="4" readonly></textarea>
Shown below is the disabled attribute set.
<textarea cols="32" rows="4" disabled></textarea>
Setting the Taborder
Taborder is the order in which elements on a webpage receive the focus, i.e. the order in which they display the input cursor when you press the [tab] key. Normally the elements on a webpage receive the focus in the same order in which their code appears in the document. However, in certain situations you may wish to explicitly control the taborder. You can use the tabindex attribute to control the taborder. Note in the example below that the textarea element receive the focus before the text element.
Setting the tab order controls the ORDER in which elements on a webpage receive the focus, but this is much more useful if you set a specific element to receive the initial focus. The code shown below uses the <body> elements onload event to call a Java Script function that sets the initial focus to the textarea element.
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById("elem2").focus();
}
</script>
</head>
<body onload="setFocus()">
<form>
<input type="text" id="elem1" tabindex="2"><br />
<input type="textarea" id="elem2" cols="16" rows="2" tabindex="1"><br />
<input type="button" id="elem3" value="Button" tabindex="3">
</form>
</body>
</html>
Styling Your textarea
Using CSS (Cascading Style Sheets) there is an incredible amount of things you do to change the appearance of your textarea. You can set a specific font, a special border, assign a background color, or even set an image as the background. CSS is too big of a topic to cover in this article, but shown below is an example of what you can do.
<style type="text/css">
#myTAstyles
{
background-color: lightblue;
border: blue 4px double;
color: blue;
font-family: verdana;
font-size: 12px;
font-weight: normal
}
</style>
<textarea id="myTAstyles" cols="32" rows="4"></textarea>
Using Java Script With Your textarea
The textarea responds to many of the standard html element events. You can do some interesting things by calling Java Script functions with these events. Java Script programming is too big of a topic to cover in this article, but shown below is an example of what you can do.
Characters Left:
<script type="text/javascript">
function countChars(text)
{
var strText = text;
var max = 128;
if(strText.length >= max)
{
var strMax = strText.substring(0, max);
document.getElementById("limit").value = strMax;
document.getElementById("left").value = 0;
}
else
{
document.getElementById("left").value = max - strText.length;
}
}
</script>
<textarea id="limit" cols="32" rows="5" onkeyup="countChars(this.value)"></textarea><br />
Characters Left: <input type="text" id="left" value="128"></input>
The above example uses the textarea's onkeyup event to call a Java Script function named countChars which limits the length of the text that the user can type into the textarea to 128 characters. Of course, you can set the max variable to any number of characters that you desire.
Getting the Text Out of a textarea
Every textarea is part of a form. If you don't explicitly enclose the textarea element inside form tags <form></form> then the textarea is part of the default form document.forms[0]. To get the text out of a textarea, you need to submit the form to a program on the server. This is usually done by putting a Submit button on the form, or executing the form's submit event by some other means. When a form's submit event is triggered, the form's data is sent to a program identified by the form tag's action attribute, as shown below.
<form action="http://domain.com/process_from.asp">
Server-side programming is too big of a topic to cover in this article, but basically, form data submitted to a server can be read by a server-side script which could, for example enter the data into a database. Below is show an example of using ASP to read data entered into an email form.
Dim strName, strEmail, strMessage
strName = Request.QueryString("name")
strEmail = Request.QueryString("email")
strMessage = Request.QueryString(""message")
In this article, you learned how to code an html textarea element and how to control the text in a textarea, along with an introduction into using CSS, Java Script, and server-side programming with an html textarea element.
More HTML Code:
• HTML Numbered or Ordered List
• XHTML Basics
• Create a Meta Tag Slide Show - No Java Script Required
• HTML DIV Basics
• HTML5 Input Type - Email
• HTML5 role Attribute
• HTML Image Basics
• Easy Form Design
• HTML Special Characters - Character Entities
• Web Page Template