In this section, we will learn what HTML <textarea> element is and how to use it.

HTML Multiline Input: What is <textarea> Tag in HTML?

HTML <textarea> element is used to create an input field where people can insert multiple lines of text data.

Basically, the <textarea> element is used for purposes like comments or reviews where users typically put multi lines of text content.

Unlike HTML <input type = “text”> where users only have a single line to fill, the <textarea> element’s height and width are changeable (Via rows and cols attributes respectively) and users can in even increase or decrease the visible area of the field manually.

HTML <textarea> Tag Syntax:

<textarea> Value… </texarea>

HTML <textarea> Tag Values

The value we set for the body of the <textarea> element appears right in the field created by this element. You can think of this value as the one that will be submitted to a server if users don’t specify anything else.

Typically, if the purpose of the value is to give an example of what the content should be, it’s better to use the placeholder attribute instead. This is because the moment users start to add text to the field, the content of the placeholder attribute disappears and so users don’t have to remove the example comment by themselves (Which happens if you put a value in the body of the <textarea>).

Example: multiline textbox in HTML

See the Pen multiline textbox in HTML by Omid Dehghan (@odehghan) on CodePen.

Example: HTML textarea form

See the Pen HTML textarea form by Omid Dehghan (@odehghan) on CodePen.

Typically, we put a <textarea> element inside the body of a form so that when the form data is submitted, the value of the textarea will be submitted as well.

But in this example, we’ve put the <textarea> element outside of the form! However, because we’ve used the `form` attribute, the textarea field is now connected to the target form, and so when that form is submitted to a server, so the value of the textarea.

HTML <textarea> Tag Attributes

Name	Description
autofocus	With this attribute, we can set the focus on the target textarea right after the HTML page is loaded.
cols	Using this attribute, we can set the visible width of the target textarea.
dirname	This attribute is used to set the text direction of the textarea that is submitted.
disabled	Using this attribute, we can turn the target textarea into disable so that users can’t put any data into or out of the field.
form	Using this attribute, we can set which form the target textarea belongs to.
maxlenth	This attribute is used to set the maximum number of characters allowed in the target textarea.
name	With this attribute, we can set a name for the target textarea. This name could then be used in servers and other programming languages like JavaScript to access this textarea and its value.
placeholder	This attribute is used to set a text hint in the target textarea which describes what should users put in the field.
readonly	This attribute is used to turn the target textarea into readonly. This means users can copy the content of the textarea (if there’s any content) but they can’t add anything to the field.
required	Using this attribute specifies that the target textarea should be filled with data. Otherwise, the form won’t be submitted to a server.
rows	Using this attribute, we can set the visible height of the target textarea.
wrap	With this attribute, we can specify how the text content of the textarea should be wrapped when submitted to a server.