HTML <textarea> tag - GeeksforGeeks

15 Dec, 2021
The <textarea> tag in HTML defines a multi-line plain-text editing control. A text space will hold an infinite range of characters, and therefore the text renders in a set-width font (usually Courier). The size of a text area is often such by the cols and rows attributes, or perhaps better; through CSS’ height and dimension properties. The textarea is generally used in a form, to collect user inputs like comments or reviews. The name attribute is needed for the reference in the form data after the form is submitted. By omitting the name attribute, data from the text area will not be submitted. The id attribute is required to link the text area with a label.
Syntax:
<textarea>....</textarea>
Attribute values:
autocomplete: It is used to specify whether the Textarea field has autocompleted on or off.
autofocus: It is used to specify that the textarea field should get automatically focus when the page loads.
cols: It is used to tell the browser how many average-width characters should fit on a single line i.e the number of columns to display.
dirname: It is used to enable the text direction of the Textarea Field after submitting the form.
disabled: It is used to specify that the text area element is disabled.
form: It is used to specify the one or more forms that the <Textarea> element belongs to.
maxlength: It is used to specify the maximum number of characters entered into the Textarea element.
minlength: It is used to define the minimum number of characters (as UTF-16 code units) of a Textarea Element.
name: It is used to specify the name of the <Textarea> element.
placeholder: It is used to specify the expected value to be displayed before user input in textarea element.
readonly: It is used to specify that the textarea element is read-only. If the textarea is read-only, then its content cannot be changed but can be copied and highlighted.
required: It is a boolean attribute that is used to specify that the <textarea> element must be filled out before submitting the Form.
rows: It is used to specify the number of visible text lines for the control i.e. the number of rows to display.
wrap: It is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted.
Example 1: This simple example illustrates the use of the <textarea> tag in HTML that enables the multi-line text input control.
HTML
<!DOCTYPE html><html><head>    <title>textarea tag</title></head> <body>    <h1>GeeksForGeeks</h1>    <h2>HTML Textarea tag </h2>    <form action="#">        <textarea rows="10"                  cols="20"                  name="blog">          Share your knowledge by writing your own blog!        </textarea>        <br>        <input type="submit"               value="submit">    </form></body></html>
Output:
HTML <textarea> Tag
Example 2: In this example, we have used the resize property whose value is set to none that will disable the resize option of the textarea.
HTML
<!DOCTYPE html><html><head>     <title>HTML textarea tag</title>     <style>        textarea {            resize: none;        }    </style></head> <body>    <h1>GeeksforGeeks</h1>    <h2>HTML Textarea tag </h2>    <form action="#">        <textarea rows="7"                  cols="50"                  name="comment">        </textarea>        <br>        <input type="submit">    </form></body></html>
Output: 
HTML <textarea> Tag
Supported Browsers:
Google Chrome 93.0
Internet Explorer 11.0
Microsoft Edge 93.0
Firefox 92.0
Safari 14.1
Opera 78.0
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
HTML-Tags
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript