Horje
What is HTML <textarea> 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 create HTML <textarea> Tag

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 Disable default resize option HTML textarea

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> autofocus Attribute on HTML <textarea> Tag

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> cols Attribute

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 add HTML <textarea> dirname Attribute

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 disable HTML <textarea> Attribute

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> form Attribute

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> maxlength Attribute

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

<textarea name="text">

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> name Attribute

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

<textarea placeholder="text">

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> placeholder Attribute

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

<textarea readonly>
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> readonly Attribute

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 add HTML <textarea> required Attribute

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

<textarea rows="number">

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 create HTML <textarea> rows Attribute

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

<textarea wrap="soft|hard">

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> wrap Attribute

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> soft wrap Attribute

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:

How to add HTML <textarea> hard wrap Attribute




html textarea

Related Articles
What is HTML <!--...--> Tag HTML Tag
What is HTML <!DOCTYPE> Declaration HTML Tag
What is HTML Elements and Doctypes HTML Tag
What is HTML <a> Tag HTML Tag
What is HTML <abbr> Tag HTML Tag
What is HTML <acronym> Tag HTML Tag
What is HTML <address> Tag HTML Tag
What is HTML <applet> Tag HTML Tag
What is HTML <area> Tag HTML Tag
What is HTML <article> Tag HTML Tag
What is HTML <aside> Tag HTML Tag
What is HTML <audio> Tag HTML Tag
What is HTML <b> Tag HTML Tag
What is HTML <base> Tag HTML Tag
What is HTML <basefont> Tag HTML Tag
What is HTML <bdi> Tag HTML Tag
What is HTML <bdo> Tag HTML Tag
What is HTML <big> Tag HTML Tag
What is HTML <blockquote> Tag HTML Tag
What is HTML <body> Tag HTML Tag
What is HTML <br> Tag HTML Tag
What is HTML <button> Tag HTML Tag
What is HTML <canvas> Tag HTML Tag
What is HTML <caption> Tag HTML Tag
What is HTML <center> Tag HTML Tag
What is HTML <cite> Tag HTML Tag
What is HTML <code> Tag HTML Tag
What is HTML <col> Tag HTML Tag
How to create HTML <colgroup> Tag HTML Tag
What is HTML <data> Tag HTML Tag
What is HTML <datalist> Tag HTML Tag
What is HTML <dd> Tag HTML Tag
What is HTML <del> Tag HTML Tag
What is HTML <details> Tag HTML Tag
What is HTML <dfn> Tag HTML Tag
What is HTML <dialog> Tag HTML Tag
What is HTML <dir> Tag HTML Tag
What is HTML <div> Tag HTML Tag
What is HTML <dl> Tag HTML Tag
What is HTML <dt> Tag HTML Tag
What is HTML <em> Tag HTML Tag
What is HTML <embed> Tag HTML Tag
What is HTML <fieldset> Tag HTML Tag
What is HTML <figcaption> Tag HTML Tag
What is HTML <figure> Tag HTML Tag
What is HTML <font> Tag HTML Tag
What is HTML <footer> Tag HTML Tag
What is HTML <form> Tag HTML Tag
What is HTML <frame> Tag HTML Tag
What is HTML <frameset> Tag HTML Tag
What is HTML <h1> to <h6> Tags HTML Tag
What is HTML <head> Tag HTML Tag
What is HTML <header> Tag HTML Tag
What is HTML <hgroup> Tag HTML Tag
What is HTML <hr> Tag HTML Tag
What is HTML <html> Tag HTML Tag
What is HTML <i> Tag HTML Tag
What is HTML <iframe> Tag HTML Tag
What is HTML <img> Tag HTML Tag
What is HTML <input> Tag HTML Tag
What is HTML <ins> Tag HTML Tag
What is HTML <kbd> Tag HTML Tag
What is HTML <label> Tag HTML Tag
What is HTML <legend> Tag HTML Tag
What is HTML <li> Tag HTML Tag
What is HTML <link> Tag HTML Tag
What is HTML <main> Tag HTML Tag
What is HTML <map> Tag HTML Tag
What is HTML <mark> Tag HTML Tag
What is HTML <menu> Tag HTML Tag
What is HTML <meta> Tag HTML Tag
What is HTML <meter> Tag HTML Tag
What is HTML <nav> Tag HTML Tag
What is HTML <noframes> Tag HTML Tag
What is HTML <noscript> Tag HTML Tag
What is HTML <object> Tag HTML Tag
What is HTML <ol> Tag HTML Tag
What is HTML <optgroup> Tag HTML Tag
What is HTML <option> Tag HTML Tag
What is HTML <output> Tag HTML Tag
What is HTML <p> Tag HTML Tag
What is HTML <param> Tag HTML Tag
What is HTML <picture> Tag HTML Tag
What is HTML <pre> Tag HTML Tag
What is HTML <progress> Tag HTML Tag
What is HTML <q> Tag HTML Tag
What is HTML <rp> Tag HTML Tag
What is HTML <rt> Tag HTML Tag
What is HTML <ruby> Tag HTML Tag
What is HTML <s> Tag HTML Tag
What is HTML <samp> Tag HTML Tag
What is HTML <script> Tag HTML Tag
What is HTML <search> Tag HTML Tag
What is HTML <section> Tag HTML Tag
What is HTML <select> Tag HTML Tag
What is HTML <small> Tag HTML Tag
What is HTML <source> Tag HTML Tag
What is HTML <span> Tag HTML Tag
What is HTML <strike> Tag HTML Tag
What is HTML <strong> Tag HTML Tag
What is HTML <style> Tag HTML Tag
What is HTML <sub> Tag HTML Tag
What is HTML <summary> Tag HTML Tag
What is HTML <sup> Tag HTML Tag
What is HTML <svg> Tag HTML Tag
What is HTML <table> Tag HTML Tag
What is HTML <tbody> Tag HTML Tag
What is HTML <td> Tag HTML Tag
What is HTML <template> Tag HTML Tag
What is HTML <textarea> Tag HTML Tag
What is HTML <tfoot> Tag HTML Tag
What is HTML <th> Tag HTML Tag
What is HTML <thead> Tag HTML Tag
What is HTML <time> Tag HTML Tag
What is HTML <title> Tag HTML Tag
What is HTML <tr> Tag HTML Tag
What is HTML <track> Tag HTML Tag
What is HTML <tt> Tag HTML Tag
What is HTML <u> Tag HTML Tag
What is HTML <ul> Tag HTML Tag
What is HTML <var> Tag HTML Tag
What is HTML <video> Tag HTML Tag
How to add HTML <wbr> Tag HTML Tag

Single Articles
How to create HTML <textarea> TagHTML Tag
How to Disable default resize option HTML textareaHTML Tag
How to add HTML <textarea> autofocus Attribute on HTML <textarea> TagHTML Tag
How to add HTML <textarea> cols AttributeHTML Tag
How to add HTML <textarea> dirname AttributeHTML Tag
How to disable HTML <textarea> AttributeHTML Tag
How to add HTML <textarea> form AttributeHTML Tag
How to add HTML <textarea> maxlength AttributeHTML Tag
How to add HTML <textarea> name AttributeHTML Tag
How to add HTML <textarea> placeholder AttributeHTML Tag
How to add HTML <textarea> readonly AttributeHTML Tag
How to add HTML <textarea> required AttributeHTML Tag
How to create HTML <textarea> rows AttributeHTML Tag
How to add HTML <textarea> wrap AttributeHTML Tag
How to add HTML <textarea> soft wrap AttributeHTML Tag
How to add HTML <textarea> hard wrap AttributeHTML Tag

Read Full:
HTML Tag
Type:
Develop
Category:
Web Tutorial
Sub Category:
HTML Tag
Uploaded:
3 weeks ago
Uploaded by:
Admin
Views:
49


Reffered: https://www.w3schools.com/tags/tag_textarea.asp

Share on: