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 CodeResult

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 CodeResult
Message:

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 CodeResult

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 CodeResult

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 CodeResult
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 CodeResult

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

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!