HTML <textarea> Tag - HTML Tag

Definition and Usage

The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area is specified by the cols and rows attributes (or with CSS).

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).

The id attribute is needed to associate the text area with a label.

Tip: Always add the <label> tag for best accessibility practices!

Browser Support

Attributes

Attribute	Value	Description
autofocus	autofocus	Specifies that a text area should automatically get focus when the page loads
cols	number	Specifies the visible width of a text area
dirname	textareaname.dir	Specifies that the text direction of the textarea will be submitted
disabled	disabled	Specifies that a text area should be disabled
form	form_id	Specifies which form the text area belongs to
maxlength	number	Specifies the maximum number of characters allowed in the text area
name	text	Specifies a name for a text area
placeholder	text	Specifies a short hint that describes the expected value of a text area
readonly	readonly	Specifies that a text area should be read-only
required	required	Specifies that a text area is required/must be filled out
rows	number	Specifies the visible number of lines in a text area
wrap	hard soft	Specifies how the text in a text area is to be wrapped when submitted in a form

Global Attributes

The <textarea> tag also supports the Global Attributes in HTML.

Event Attributes

The <textarea> tag also supports the Event Attributes in HTML.

How to create HTML <textarea> Tag

It is A multi-line text input control (text area).

index.html

Example: HTML

 <label for="w3review">Review of W3Schools:</label>

<textarea id="w3review" name="w3review" rows="4" cols="50">
At horje.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>

Output should be:

How to Disable default resize option HTML textarea

The textarea element - Disable default resize option.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
textarea {
  resize: none;
}
</style>
</head>
<body>

<h1>The textarea element - Disable default resize option</h1>

<p><label for="w3review">Review of Horje:</label></p>

<textarea id="w3review" name="w3review" rows="4" cols="50">
At horje.com you will learn how to make a website. They offer free tutorials in all web development technologies.

Output should be:

How to add HTML <textarea> autofocus Attribute on HTML <textarea> Tag

It is A text area with autofocus.

index.html

Example: HTML

 <textarea autofocus>
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

Output should be:

How to add HTML <textarea> cols Attribute

It is A text area with a specified height and width.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The textarea rows and cols attributes</h1>

<textarea rows="4" cols="50">
At horje.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

<p>This textarea has 4 visible rows.</p>
<p>You can change that by changing the value of the "rows" attribute.</p>

</body>
</html>

Output should be:

How to add HTML <textarea> dirname Attribute

It is An HTML form where the field's text direction will be submitted.

index.html

Example: HTML

 <form action="/action_page.php">
  Text:
  <textarea name="explanation" dirname="explanation.dir"></textarea>
  <input type="submit" value="Submit">
</form>

Output should be:

How to disable HTML <textarea> Attribute

It is A disabled text area.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The textarea disabled attribute</h1>

<textarea disabled>
At horje.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

</body>
</html>

Output should be:

How to add HTML <textarea> form Attribute

It is A text area located outside a form (but still a part of the form).

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The textarea form attribute</h1>

<form action="/action_page.php" id="usrform">
  Name: <input type="text" name="usrname">
  <input type="submit">
</form>
<br>
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>

<p>The text area above is outside the form element, but should still be a part of the form.</p>

</body>
</html>

Output should be:

How to add HTML <textarea> maxlength Attribute

It is A text area with a maximum length of 50 characters.

index.html

Example: HTML

 <textarea maxlength="50">
Enter text here...
</textarea>

Output should be:

How to add HTML <textarea> name Attribute

It is A text area with a name attribute.

Definition and Usage

The name attribute specifies a name for a text area.

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Syntax

Attribute Values

Value	Description
text	Specifies the name of the text area

index.html

Example: HTML

 <form action="/action_page.php">
  <textarea name="comment">Enter text here...</textarea>
  <input type="submit">
</form>

Output should be:

How to add HTML <textarea> placeholder Attribute

Definition and Usage

The placeholder attribute specifies a short hint that describes the expected value of a text area.

The short hint is displayed in the text area before the user enters a value.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

Attribute Values

Value	Description
text	Specifies a short hint that describes the expected value of the text area

It is A text area with a placeholder text.

index.php

Example: HTML

 <textarea placeholder="Describe yourself here..."></textarea>

Output should be:

How to add HTML <textarea> readonly Attribute

Definition and Usage

The readonly attribute is a boolean attribute.

When present, it specifies that a text area should be read-only.

In a read-only text area, the content cannot be changed, but a user can tab to it, highlight it and copy content from it.

The readonly attribute can be set to keep a user from using a text area until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the readonly value, and make the text area editable.

Browser Support

Syntax

index.html

Example: HTML

 <textarea readonly>
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

Output should be:

How to add HTML <textarea> required Attribute

It is A form with a required text area.

index.html

Example: HTML

 <form action="/action_page.php">
  <textarea name="comment" required></textarea>
  <input type="submit">
</form>

Output should be:

How to create HTML <textarea> rows Attribute

Definition and Usage

The rows attribute specifies the visible height of a text area, in lines.

Note: The size of a textarea can also be specified by the CSS height and width properties.

Browser Support

Syntax

Attribute Values

Value	Description
number	Specifies the height of the text area (in lines). Default value is 2

index.html

Example: HTML

 <textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

Output should be:

How to add HTML <textarea> wrap Attribute

Definition and Usage

The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.

Browser Support

Syntax

Attribute Values

Value	Description
soft	The text in the textarea is not wrapped when submitted in a form. This is default
hard	The text in the textarea is wrapped (contains newlines) when submitted in a form. When "hard" is used, the cols attribute must be specified

index.html

Example: HTML

 <textarea rows="2" cols="20" wrap="hard">
At W3Schools you will find free Web-building tutorials.
</textarea>

Output should be:

How to add HTML <textarea> soft wrap Attribute

soft	The text in the textarea is not wrapped when submitted in a form. This is default

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The textarea wrap attribute</h1>

<form action="/action_page.php">
<textarea rows="2" cols="20" name="usrtxt" wrap="soft">
At horje you will find free Web-building tutorials.
</textarea>
<input type="submit">
</form>

</body>
</html>

Output should be:

How to add HTML <textarea> hard wrap Attribute

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The textarea wrap attribute</h1>

<form action="/action_page.php">
<textarea rows="2" cols="20" name="usrtxt" wrap="hard">
At horje you will find free Web-building tutorials.
</textarea>
<input type="submit">
</form>

</body>
</html>

Output should be:

html textarea

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference