The HTML <textarea> tag is an essential element in a webpage that allows multi-line text input in web forms. This tutorial will walk you through its basic features, including how to use it in forms and style it with CSS. By the end of this tutorial, you'll be able to create and personalize text input fields for user feedback and other purposes.

What is the HTML <textarea> tag?

The HTML <textarea> tag creates a multi-line text input field for users to enter long text into a webpage. It is commonly used in web forms and is required to allow users to enter comments, feedback, or other information.

Basic Syntax

<textarea rows="4" cols="50">
Enter text here...

The rows and cols attributes set the number of visible text lines and the number of average-width characters on a single line, respectively. You can use these attributes to control the size of your textarea.

Creating a Basic Textarea

Here is an example of how to use the <textarea> tag in an HTML form:

<form action="/submit_form" method="POST">
  <label for="comment">Leave a Comment:</label>
  <textarea id="comment" name="comment" rows="4" cols="50"></textarea>
  <input type="submit" value="Submit">

The HTML form in the example above contains a <textarea> that allows users to enter comments. With rows and cols attributes set to 4 and 50, respectively, the textarea displays four lines of text, with each line having the capacity to show up to 50 characters. Additionally, the name attribute of the textarea is set to "comment", which means that this particular input area will be recognized as a "comment" when the form is submitted.

Textarea Attributes

The following table provides a brief overview of the most relevant attributes that you can apply directly to the <textarea> tag:

Attribute Purpose Example
autocomplete Determine if the field has autocomplete on/off. autocomplete="on"
autofocus Auto-focus the field when the page loads. autofocus
cols Number of average-width characters on a single line. cols="40"
dirname Set the text direction after submitting the form. dirname="text-direction"
disabled Disable the <textarea> element. disabled
form Link the <textarea> to one or more forms. form="formID"
maxlength Set the maximum number of characters for the input. maxlength="500"
minlength Set the minimum number of characters for the input. minlength="10"
name Name of the <textarea> element (for server-side). name="message"
placeholder Display expected value hint before user input. placeholder="Type your feedback here..."
readonly Make the <textarea> content uneditable. readonly
required <textarea> must be filled out before submitting. required
rows Define the number of visible text lines. rows="5"
wrap Define how user text should wrap when a form is submitted. wrap="soft"

Note: Some of these attributes may be self-closing or may not require a value (such as autofocus and disabled).

Styling the Textarea

The appearance of your <textarea> can be improved using CSS. For example, the following code will make your text area more attractive with padding, rounded corners, and a defined border:

textarea {
    font-family: Arial, sans-serif;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;


The HTML <textarea> tag is essential for multi-line input in web forms. Through this tutorial, you learned how to use and style it effectively. With the right attributes and CSS, you can create the <textarea> to improve the user experience, making web interactions smooth and engaging.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram