HTML Textarea: rows, cols, maxlength, readonly and required

The HTML <textarea> element collects multi-line text such as comments, descriptions, messages or article content.

<label for="message">Message</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>

Message

Unlike <input>, a textarea does not use a value attribute for its initial text. The initial value goes between the opening and closing <textarea> tags.

Show Table of Contents

Basic Textarea Syntax Top ↑

<textarea name="txtArea" rows="3" cols="50">Textarea Data</textarea>

This creates a multi-line editing control with initial text of Textarea Data.

Textarea Attributes Top ↑

Attribute	Purpose
`name`	Defines the field name used when the form is submitted.
`id`	Identifies the element and connects it to a label.
`rows`	Sets the visible number of text lines.
`cols`	Provides an approximate visible width in character columns.
`maxlength`	Sets the maximum number of characters accepted.
`minlength`	Sets the minimum number of characters for browser constraint validation.
`placeholder`	Shows a short hint while the textarea has no value.
`autocomplete`	Provides browser autofill guidance.
`autofocus`	Requests focus when the page loads.
`readonly`	Prevents editing while keeping the value available for normal form submission.
`disabled`	Disables interaction and normally excludes the control from form submission.
`required`	Requires a non-empty value for browser constraint validation.
`wrap`	Controls how line wrapping is handled when text is submitted.
`form`	Associates the textarea with a form by that form's `id`, even when the textarea is outside the form element.

name, id and label Top ↑

The name is used for submitted form data. The id uniquely identifies the control in the document and can connect it to a visible label.

<label for="bio">Short biography</label>
<textarea id="bio" name="bio" rows="5"></textarea>

A normal successful textarea without a name is not included in the submitted form data. A placeholder should not replace a visible label.

Initial Text Top ↑

Place the initial text between the opening and closing tags:

<textarea name="notes">Initial notes</textarea>

Do not write:

<!-- Incorrect for setting textarea content -->
<textarea name="notes" value="Initial notes"></textarea>

The value attribute does not set textarea content.

rows, cols and CSS Sizing Top ↑

rows controls the visible height in text lines, while cols provides an approximate visible width in character columns.

<textarea name="description" rows="6" cols="50"></textarea>

Demo of textarea rows and cols

For responsive layout, CSS is usually better for width:

<textarea name="description" rows="6" style="width: 100%;"></textarea>

In reusable pages, place the style rule in a stylesheet rather than repeating inline CSS.

maxlength and minlength Top ↑

<label for="summary">Summary</label>
<textarea
  id="summary"
  name="summary"
  minlength="20"
  maxlength="500"
  required
></textarea>

Demo of maxlength and minlength

Browser length validation improves usability, but the server must still enforce any required length limits.

placeholder Top ↑

<label for="feedback">Feedback</label>
<textarea id="feedback" name="feedback" placeholder="Tell us what you liked or what could be improved"></textarea>

Demo of placeholder

Placeholder text disappears as the user enters content, so it should be a hint rather than the only field label.

autocomplete Top ↑

autocomplete can be used to provide browser autofill guidance where an applicable autocomplete token exists.

<textarea name="address" autocomplete="street-address"></textarea>

Use meaningful autocomplete tokens rather than treating on and off as the only possibilities.

autofocus Top ↑

<textarea name="message" autofocus></textarea>

Demo of autofocus

Use autofocus selectively. Automatically moving focus may be disruptive for users who expect to start at the beginning of the page or who use assistive technologies.

readonly vs disabled Top ↑

readonly Top ↑

<textarea name="terms" readonly>These terms cannot be edited.</textarea>

A readonly textarea cannot be edited, but users can normally focus/select its text and its value is normally submitted with the form.

Demo of readonly textarea

disabled Top ↑

<textarea name="terms" disabled>This control is disabled.</textarea>

A disabled textarea is not normally focusable and is excluded from normal form submission.

Neither readonly nor disabled makes a value secure or trustworthy. Server-side code must enforce permissions and validate submitted data.

required Top ↑

<label for="comment">Comment</label>
<textarea id="comment" name="comment" required></textarea>

Demo of required textarea

The server must still check required data because client-side validation can be bypassed.

wrap: soft and hard Top ↑

The wrap attribute controls how text wrapping is represented when the form value is submitted.

Value	Behavior
`soft`	Text may wrap visually in the control, but the browser does not add line breaks merely because of that visual wrapping.
`hard`	Visual wrapping is represented with line breaks in the submitted value; `cols` is required for this behavior.

<textarea name="notes" rows="5" cols="40" wrap="hard"></textarea>

The original page's wrap description was misleading. hard and soft do not mean "wrap" versus "do not wrap"; the important distinction is whether visual line wrapping is represented in the submitted value.

Associate Textarea with a Form Top ↑

A textarea can belong to a form even when it is outside that form's opening and closing tags.

<form id="feedback_form" action="save.php" method="post">
  <button type="submit">Submit</button>
</form>

<label for="feedback2">Feedback</label>
<textarea id="feedback2" name="feedback" form="feedback_form"></textarea>

Demo of the form attribute

Complete Form Example Top ↑

<form action="save-feedback.php" method="post">
  <label for="feedback3">Your feedback</label>

  <textarea
    id="feedback3"
    name="feedback"
    rows="6"
    maxlength="1000"
    placeholder="Enter your feedback"
    required
  ></textarea>

  <button type="submit">Send feedback</button>
</form>

Receiving Textarea Data in PHP Top ↑

A textarea is submitted as a normal string value. Validate it on the server before storing or using it.

<?php
$feedback=$_POST['feedback'] ?? '';
$feedback=trim($feedback);

if($feedback === ''){
    echo 'Feedback is required.';
}elseif(strlen($feedback) > 1000){
    echo 'Feedback is too long.';
}else{
    echo nl2br(
        htmlspecialchars(
            $feedback,
            ENT_QUOTES,
            'Windows-1252'
        )
    );
}

The exact character-count rule should match your application and encoding. For Unicode-heavy applications, use character-aware length handling where appropriate.

Safely Display Dynamic Text in a Textarea Top ↑

If an application puts stored or submitted text back inside a textarea, HTML-escape the dynamic value.

<?php
$value='Example <text> & notes';
?>

<textarea name="notes"><?= htmlspecialchars(
    $value,
    ENT_QUOTES,
    'Windows-1252'
) ?></textarea>

This prevents dynamic content such as </textarea> from being interpreted as markup and prematurely closing the element.

jQuery Textarea Management Top ↑

Managing textarea content with jQuery

Video Tutorial Top ↑

HTML input textarea and its attributes like name value size maxlength autofocus with examples

Common Textarea Mistakes Top ↑

Using value= to set the textarea content Top ↑

Put the initial text between the opening and closing textarea tags.

Using placeholder instead of a label Top ↑

Use a visible label for the field name and placeholder only for a short hint.

Assuming disabled content is submitted Top ↑

A disabled textarea is normally excluded from normal form submission.

Confusing readonly with disabled Top ↑

Readonly content is normally submitted; disabled content is normally not submitted.

Misunderstanding wrap=hard and wrap=soft Top ↑

The difference concerns whether visual wrapping is represented by line breaks in the submitted value.

Relying only on maxlength, minlength or required Top ↑

Browser validation can be bypassed. Validate again on the server.

Outputting dynamic text without escaping Top ↑

Escape dynamic values before placing them between textarea tags.

Frequently Asked Questions Top ↑

Q1: What is textarea used for in HTML?

It is used for multi-line text input such as comments, messages, descriptions and article content.

Q2: How do I set the initial value of a textarea?

Place the initial text between the opening and closing textarea tags. Do not use a value attribute.

Q3: What is the difference between rows and cols?

Rows controls the visible number of text lines. Cols provides an approximate visible width in character columns.

Q4: What is the difference between readonly and disabled?

Readonly prevents editing but the value is normally submitted. Disabled prevents normal interaction and the control is normally excluded from submission.

Q5: What does wrap="hard" do?

It causes visual wrapping to be represented with line breaks in the submitted value; cols is required for this behavior.

Q6: Can a textarea be outside its form?

Yes. The form attribute can associate it with a form by that form's id.

Q7: Does maxlength replace server-side validation?

No. Validate textarea length and content again on the server.

HTML Form Text field Hidden field Password input field

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

HTML Textarea for Multi-line Text