HTML textarea Tag Tutorial

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.

Leave a Reply