HTML textarea tag
HTML

HTML textarea tag

Mishel Shaji
Mishel Shaji

The <textarea> tag is used to create a multi-line text input. Unlike other input tags, the textarea tag have closing tags.

Syntax

<textarea>text</textarea>

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML textarea</title>
</head>
<body>
    <textarea rows="5" cols="50" placeholder="Type something here">
    </textarea>
</body>
</html>

Output

Attribute

Textarea supports HTML Global Attributes.

AttributeDescription
autofocusSpecifies whether the element should get focused after loading the page.
autocompleteSpecifies whether the value of the element can be automatically completed by the browser based on the previous inputs.
colsSpecifies the width (characters) of the text area. The default value is 20.
disabledIndicates that the element should not be enabled. If disabled, user cannot interact with the element.
formSpecifies the form which the textarea belongs to.
maxlengthSpecifies the maximum number of characters that the user can enter.
nameSpecifies the name of the element.
placeholderSpecifies the hint to be displayed.
readonlySpecifies whether the user can modify the value of the control. Unlike the disabled attribute, the readonly attribute does not prevent the user from clicking or selecting in the control. 
requriedSpecifies whether the user should fill the element before submitting the form.
rowsSpecifies the number of rows (lines) of the element.
wrapSpecifies how the text entered in the textarea should be wrapped. It can have the following values:
->hard - The browser automatically inserts line-breaks to keep the length of the line below the width of the element.
->soft - The browser ensures that all line breaks in the value consist of a CR+LF pair.
->off - This is the default value. The lines exceeding the width of the element are not wrapped and the element becomes horizontally scrollable.

Example

<form action="#" id="myform">
    <textarea name="txt" maxlength="5" placeholder="You can enter more than 5 characters here" required>
    </textarea>
    <button>Try saving without filling a textarea</button>
</form>
<textarea name="txt1" form="myform" placeholder="You cannot leave this field empty." required>
</textarea>