How to use HTML textarea with examples

Quick Reach

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 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, 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. 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.

The basic syntax of HTML textarea is:

<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 as a web page is loaded containing that textarea.

Basic example of creating HTML textarea

The example below creates a basic textarea in HTML.

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.

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.

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.

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 then can be retrieved in the server-side scripting language like PHP.

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

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.

CSS 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.

As you can see, the CSS based textarea where the color of 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:

Also see HTML Forms | HTML input type | HTML div

Was this article helpful?

Related Articles

Leave A Comment?