The textarea in HTML

The HTML element textarea is used to allow entering multi-line text. For the single line, you may use input type text. The text area is used with HTML forms where a user can enter longer text messages.

The text is submitted as a user presses the submit or save button in the HTML form where you can process information entered in the textarea by using the server side scripting like PHP, ASP.net etc. Examples of using the textarea include using it in the contact us pages, feedback forms etc.

You can specify the textarea size by using the rows and cols attributes or height and width CSS properties. We will show you how to use the text area in HTML, specify its size and other attributes along with applying CSS style with examples.

Syntax of HTML textarea

This is how you may create a textarea in a web page:

<textarea rows=”15″ cols=”40″></textarea>

Where rows and cols define the height and width of the textarea. Any text written before the closing tag </textarea> will be shown within the textarea.

Basic example of creating HTML textarea

The example below creates a basic textarea.

Experience this online

Define the textarea size

The text area size can be defined by using the rows and cols attributes of textarea tag. The more the value the larger will be textarea. The example below creates a textarea of 50 columns and 30 rows.

Experience this online

You can also specify the height and width of the textarea by using the CSS. See the section below to learn with CSS.

Textarea maxlength example

The maxlength attribute of the textarea tag specifies the maximum number of characters that can be entered in the textarea. See the following example of using the maxlength attribute where we set the maximum length = 100 characters.

Experience this online

As you can see, only 100 characters can be entered in the above example.

Textarea readonly example

You can make a textarea as read-only by using the readonly attribute. This is useful in scenarios like presenting the terms and conditions in the textarea or only allowing a user to submit pre-defined multi-line messages.

In that case, you may write the pre-defined text before the closing tag of textarea. See the following example of using the readonly attribute.

Experience this online

Input textarea

To use textarea for submission of textual information, you have to use it inside the <form> tag where other input elements are also used. The submitted information can be retrieved in the server-side scripting language like PHP.

To use text area as input in the HTML form, see example below:

Experience this online

Textarea value example

The value of the textarea can be retrieved after HTML form is submitted to the server side. The example below shows how to get the textarea value in the PHP script after you press the Submit button.

Experience this online

CSS based textarea

You can apply the style to textarea by using the CSS. Not only look and feel can be set by using the CSS but also height and width (textarea size) can also be set by using the CSS properties. See examples below to apply the style with CSS.

Experience this online

As you can see, the CSS based textarea where the color of the text is set to green, border color and style, height and width of textarea are also set by using the CSS properties.

In the above example, we created a CSS class and used it inside the <textarea> tag. You can also set the CSS by using the style attribute. See example below for using the Style attribute:

Experience this online

Further Reading: HTML Forms