HTML Textarea

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.

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.

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.

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.

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.

<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.

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.

• 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

<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]

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

Choose the option that lists all and only the correct statements.

1. placeholder
2. name
3. rows
4. type

Choose the option that lists all and only the correct statements.

1. <textarea name="remarks" rows="4" cols="30">Initial note</textarea>

2. <textarea placeholder="Write your feedback here..."></textarea>

3. <textarea type="text">Hello</textarea>

4. <textarea name="bio" rows="5" cols="40"></textarea>

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