HTML rows Attribute

Introduction

The rows attribute sets the visible height of a <textarea> in text lines. Use it to give users enough space for comments, feedback, or longer messages without relying on CSS alone. The default is 2 rows if you omit the attribute. Pair rows with cols for both height and width, or use CSS min-height for responsive layouts. Set textarea.rows in JavaScript to resize dynamically. Not the same as rowspan on table cells.

What You’ll Learn

Purpose of rows Attribute

The primary purpose of rows is to define how many lines of text are visible at once in a textarea. It sets the initial vertical size of the field so users can see more (or less) content before scrolling.

A contact form might use rows="4" for a short note and rows="10" for a detailed support ticket. Users can still type beyond the visible area — the field scrolls — but a well-chosen rows value improves the first impression of your form.

📝 Syntax

Add rows to a <textarea> with a positive integer:

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="5"></textarea>

Syntax Rules

• Valid only on <textarea> elements.
• Value must be a positive integer (e.g. 3, 8, 12).
• Default is 2 when the attribute is omitted.
• Controls initial visible lines — users can scroll to see more typed content.
• Pair with cols for width; use CSS for responsive sizing.
• JavaScript: textareaElement.rows = 10 (integer property).
• Not related to rowspan on <td> / <th>.

💎 Values

The rows attribute accepts a positive integer representing visible text lines:

• rows="2" — Default size; fine for one-line notes.
• rows="4" — Short feedback or comment fields.
• rows="8" — Medium messages, support requests.
• rows="12" or higher — Long-form text, drafts, descriptions.

<textarea rows="3" cols="30">Short comment</textarea>
<textarea rows="6" cols="40">Standard message</textarea>
<textarea rows="12" cols="60">Long description</textarea>

How it Works

In rows="5", the browser renders the textarea tall enough to show approximately five lines of text at the default font size.

Applicable Elements

rows vs rowspan

Examples Gallery

Form textarea sizing, dynamic textarea.rows in JavaScript, and comparing different row counts side by side.

<form>
  <label for="comments">Comments:</label>
  <textarea id="comments" name="comments" rows="8"></textarea>
  <input type="submit" value="Submit">
</form>

<textarea id="dynamicTextArea"></textarea>

<script>
  document.getElementById("dynamicTextArea").rows = 10;
</script>

<label>Short (3 rows)</label>
<textarea rows="3" cols="40"></textarea>

<label>Tall (10 rows)</label>
<textarea rows="10" cols="40"></textarea>

♿ Accessibility

• Always use labels — Pair every <textarea> with a visible <label> linked via for/id.
• Size is visual only — Screen readers do not treat rows as a character or line limit.
• Allow resizing when helpful — CSS resize: vertical lets users grow the field if they need more space.
• Do not use rows as validation — Use maxlength or server checks for input limits, not visible height.
• Test on mobile — Large rows values can dominate small screens; balance with CSS max-height.

💡 Best Practices