Tag <textarea> In HTML

Our objective in this chapter is to study Tag textarea through examples, in anticipation of satisfying the needs of learners.

The <textarea> tag in HTML is a form control element that is used to create a multi-line text input field on a web page. It allows users to enter and edit multiple lines of text in a form and is commonly used for comments, feedback, and other types of user input that require longer text input.

The <textarea> element is similar to the <input> element, but allows for a larger input area that can be expanded vertically and horizontally to fit the text entered by the user. It also supports special characters such as line breaks, which are not allowed in a single-line input field.

HTML Textarea Attributes

The <textarea> element has a few additional attributes that control its behavior and appearance:

  1. name: This attribute is used to associate the input with a name that can be used to reference it on the server when the form is submitted.
  2. rows and cols: These attributes control the size of the text area. The rows attribute specifies the number of visible lines of text, while the cols attribute specifies the number of visible columns.
  3. Content: The content between the opening and closing <textarea> tags is the default value that will be displayed in the input field. This content can be pre-populated with a default value or placeholder text.

Using the <textarea> tag, you can create a text input field for users’ comments:


<!DOCTYPE html> <html> <body> <form> <label for="comments">Enter your comments:</label> <textarea id="comments" name="comments" rows="5" cols="30"></textarea> <input type="submit" value="Submit"> </form> </body> </html>

You can disable the default resize option by following these steps:


<!DOCTYPE html> <html> <head> <style> textarea { resize: none; } </style> </head> <body> <form> <label for="mrreview">Review of mrexamples:</label> <textarea id="mrreview" name="mrreview" rows="4" cols="50"> At mrexamples.com you will learn how to make a website. They offer free tutorials in all web development technologies. </textarea> </form> </body> </html>

Adding readonly or disabled attributes makes it noneditable:


<!DOCTYPE html> <html> <body> <form> <label for="mrreview">Mr Examples:</label> <textarea readonly>This textarea is readonly</textarea> <textarea disabled>This textarea is disabled</textarea> </form> </body> </html>

Textarea tag can also be styled using CSS here is an example:


<!DOCTYPE html> <html> <head> <title>Example of the textarea tag</title> <style> textarea { font-size: 16px; padding: 10px; border-radius: 5px; border: 2px solid gray; width: 50%; } </style> </head> <body> <h1>Leave a Comment</h1> <form> <label for="comments">Enter your comments:</label> <textarea id="comments" name="comments" rows="5" cols="30" maxlength="500" placeholder="Enter your comments here"></textarea> <input type="submit" value="Submit"> </form> </body> </html><html><p> Execute </p></html>

Advice: In order to ensure effective methods of accessibility, include the <label> tag!

Tag textarea Usage

The Tag <textarea> represents a multiple-line data input control.

The Tag textarea <textarea> element is commonly used in forms to store information provided by users, especially reviews and comments.

There is no limit to the number of characters that can be contained in a text area, and the text is displayed in a fixed-width font (generally Courier).

Using Tag textareas, we determine the width and height of a text area using the <cols> and <rows> attributes or through CSS.

In order for the form data to be accessed after submission, the name attribute is necessary. If the name attribute is not present, no data from the text area will be sent to the server.

In order to relate a label to a text area, the id attribute should be used.

The <textarea> tag can be used in a variety of ways, such as:

  • <textarea> can be used to create input fields for user comments, feedback, and other types of longer text input.
  • A contact form can include a <textarea> field for users to enter their message or inquiry.
  • <textarea> is commonly used in content management systems to allow users to enter and edit large amounts of text for articles, blog posts, and other types of content.
  • Some HTML editors use <textarea> to provide a larger text input area for editing HTML code.
  • Messaging systems, such as chat or email, may use <textarea> to provide a larger text input area for composing messages.



The Tag textarea <textarea> are compatible with Global Attributes in HTML.


The Tag <textarea> accommodates HTML Event Attributes as well.

Attributes List

Attribute Value Overview
autofocus autofocus Allows the text area to automatically gain focus upon loading the page.
cols number Determines how wide a text area will be displayed.
dirname textareaname.dir Declare that the text direction of the textarea should be submitted.
disabled disabled Disable the text area.
form form_id Determine the form for which the text area is assigned.
maxlength number Allows the text area to contain a maximum number of characters.
name text Provide a name for the text area.
placeholder text Provide a short description of the intended outcome of the text area.
readonly readonly Provides instructions for making a text area read-only.
required required Indicates that a text area is needed or should be filled out
rows number Sets the number of lines visible in a text area
wrap hard
Whenever submitted in a form, this indicates how text in a text area should be wrapped

Browser Compatibility

<textarea> Yes Yes Yes Yes Yes

Tag textarea Advantages

Some of these advantages include:

  • The <textarea> tag allows users to enter and edit multiple lines of text, making it a flexible input mechanism for various types of user input.
  • <textarea> supports screen readers and other assistive technologies, making it accessible to users with disabilities.
  • <textarea> provides a consistent user experience across different web browsers and platforms, making it easier for developers to create web forms that work reliably for all users.
  • The appearance and behavior of <textarea> can be customized using CSS, allowing developers to create input fields that match the look and feel of their website.
  • <textarea> is supported by all modern web browsers, making it a reliable choice for creating web forms that work across different platforms and devices.
  • <textarea> provides a large input area that allows users to enter a lot of text at once, making it ideal for longer form fields like comments, feedback, and message inputs.
If this article was informative enough to fulfill your educational desires, then do share this meaningful information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *