HTML Textarea Code

This page contains HTML textarea code — code for creating a textarea on an HTML document.

A textarea is a form element that allows the user to enter multiple lines of text. A textarea is created with the HTML <textarea> tag. The textarea can be nested inside a <form> element or it can stand alone. It can also be associated with a form via its form attribute.

Basic Textarea Example

Here's an example of an HTML textarea:

Source Code	Result
<textarea rows="3" cols="20"> Enter text here... </textarea>	Enter text here...

The above textarea consists of a start and an end tag. Enclosed between these tags is the contents of the textarea. In this case it's the text "Enter text here...". The tag also contains some attributes (in this case, rows, cols, and maxlength). These are just some of the many attributes that can be applied to this element. For a full list of attributes, see <textarea>.

Add a Submit Button

So you've got a textarea. Users can now enter text into it. But that text won't go anywhere or do anything unless you add some more code.

Let's add a "submit" button. We will also put the textearea inside a form. Now, the user can click the "submit" button to send the text to the server.

In this case, the textarea is enclosed inside a <form> element, which specifies a page on the server that will process the contents of the textarea. This example also uses an <iframe> to display the processing page.

Source Code	Result
<form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result" method="get"> Message:<br> <textarea rows="3" cols="20" maxlength="90" name="msg"> Enter text here... </textarea> <br> <input type="submit" value="Submit"> </form> <p>Result:</p> <iframe name="result" style="height:100px;width:200px;"></iframe>	Message: Enter text here... Result:

Placeholder Text

You can specify placeholder text to provide a hint to the user to help them complete the textarea. For example, this could be sample text or a description of the expected format.

To add placeholder text, use the placeholder attribute.

For best results, leave the textarea blank. Otherwise the textarea's contents will probably be displayed instead of the placeholder text. Here's an example:

Source Code	Result
<textarea rows="3" cols="20" placeholder="What did you do today?"> </textarea>

Minimum & Maximum Length

You can specify a minimum and/or a maximum length for the text inside the textarea. These attributes limit how many characters the user can enter into the textarea field.

Source Code	Result
<textarea rows="3" cols="20" placeholder="What did you do today?" minlength="5" maxlength="20"> </textarea>

The `form` Attribute

In the above example, we enclosed the textarea inside of a form. HTML5 also allows you to specify a form using the form attribute. This method could be used in the event that the textarea is not inside the form that needs to submit its contents.

In the next example, add id="myForm" to the form. We then add form="myForm" to the textarea and move the textarea outside of the form. Submitting the form should still submit the contents of the textarea, because it references the id of the form in its form attribute.

Source Code	Result
Message:<br> <textarea rows="3" cols="20" maxlength="90" name="msg" placeholder="What did you do today?" form="myForm"> </textarea> <br> <form action="//www.html.am/html-codes/forms/html-form-tag-action.cfm" target="result2" method="get" id="myForm"> <input type="submit" value="Submit"> </form> <p>Result:</p> <iframe name="result2" style="height:100px;width:200px;"></iframe>	Message: Result:

Disabling a Textarea

You can disable a textarea by using the disabled attribute. You could use this in conjunction with a script to enable/disable the textarea depending on whether certain criteria has been met.

Source Code	Result
<textarea rows="3" cols="20" maxlength="20" name="msg" placeholder="What did you do today?" disabled> </textarea>

Also check out textboxes for more about working with the textarea element.