HTML Textarea Tag
Multiline Input Field

HTML Textareas: When One Line Just Isn’t Enough

Not all inputs are short. Sometimes users need to write a paragraph — a comment, a message, a description. That’s where the <textarea> tag shines. It lets users enter multiline text with room to think and express more.

Basic Structure of a Textarea

The <textarea> element is not self-closing. You use an opening tag, closing tag, and the content goes inside.

<label for="message">Your Message:</label><br>
<textarea id="message" name="message"></textarea>

Your Message:
[                     ]
[                     ]
[                     ]

By default, the box may be small. You can customize its size with attributes.

Setting Rows and Columns

Use the rows and cols attributes to control visible height and width of the textarea.

<textarea name="comments" rows="4" cols="30"></textarea>

[                           ]
[                           ]
[                           ]
[                           ]

This creates a box that's 4 lines tall and 30 characters wide.

Adding Placeholder Text

Just like with <input>, you can guide users using the placeholder attribute.

<textarea name="feedback" rows="4" cols="40" placeholder="Tell us what you think..."></textarea>

[ Tell us what you think... ]

The placeholder disappears when the user starts typing.

Pre-Filling a Textarea

You can place default text between the opening and closing <textarea> tags.

<textarea name="note">Hello World</textarea>

[ Hello World ]

This is useful for preloaded notes or editing existing content.

Using Textarea Inside a Form

<form action="/submit" method="post">
  <label for="review">Write your review:</label><br>
  <textarea id="review" name="review" rows="5" cols="50" placeholder="Your experience with the banana...></textarea><br><br>
  <input type="submit" value="Submit">
</form>

Write your review:
[ Your experience with the banana...       ]
[                                           ]
[                                           ]
[                                           ]
[                                           ]
[Submit]

When submitted, the content inside the textarea is sent as the value of the name attribute.

Textarea Styling Tip

By default, users can resize textareas. You can control this using CSS (covered later), but in basic HTML, it's helpful to define rows and cols thoughtfully.

Best Practices

• Always label your textarea to improve accessibility
• Use placeholders for helpful hints, not essential instructions
• Don’t over-restrict size; give space to express
• Use default text sparingly so users don’t accidentally submit unchanged content

Full Example: Fruit Feedback Form

<form action="/submit-feedback" method="post">
  <label for="fruit">Which fruit did you try?</label><br>
  <input type="text" id="fruit" name="fruit" placeholder="Apple, Banana, Cherry..."><br><br>

  <label for="comment">Share your experience:</label><br>
  <textarea id="comment" name="comment" rows="4" cols="50" placeholder="Was it sweet? Fresh? Juicy?"></textarea><br><br>

  <input type="submit" value="Send Feedback">
</form>

Which fruit did you try?
[ Apple, Banana, Cherry... ]

Share your experience:
[ Was it sweet? Fresh? Juicy?             ]
[                                         ]
[                                         ]
[                                         ]

[Send Feedback]

Summary

The <textarea> tag gives users the space to say more — and sometimes, that’s exactly what your form needs. You’ve now learned to:

• Create multi-line input fields using <textarea>
• Set visible dimensions using rows and cols
• Guide users with placeholder text
• Pre-fill fields with default values

What’s Next?

In the next tutorial, we’ll bring it all together by exploring Submit and Reset Buttons — the final step in any HTML form journey.