0
0
HtmlHow-ToBeginner · 3 min read

How to Create a Textarea in HTML: Simple Guide

To create a multi-line text input area in HTML, use the <textarea> element. It requires an opening and closing tag, and you can set its size with rows and cols attributes.
📐

Syntax

The <textarea> tag creates a multi-line text input field. It has an opening and closing tag. You can control its size using rows (height) and cols (width) attributes. The text between the tags is the default content inside the textarea.

html
<textarea rows="4" cols="50">Default text here</textarea>
Output
A box with 4 lines height and 50 columns width showing 'Default text here' inside it.
💻

Example

This example shows a simple textarea with a label. The user can type multiple lines of text inside the box.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textarea Example</title>
</head>
<body>
  <label for="comments">Comments:</label><br>
  <textarea id="comments" name="comments" rows="5" cols="40" placeholder="Write your comments here..."></textarea>
</body>
</html>
Output
A labeled box with 5 lines height and 40 columns width showing placeholder text 'Write your comments here...'. The user can type multiple lines inside.
⚠️

Common Pitfalls

  • Forgetting the closing </textarea> tag will break the page layout.
  • Using value attribute does not set the textarea content; instead, put default text between the tags.
  • Not setting rows and cols can make the textarea too small or too large by default.
html
<!-- Wrong way: value attribute does not work -->
<textarea rows="4" cols="30">Hello</textarea>

<!-- Right way: put default text inside -->
<textarea rows="4" cols="30">Hello</textarea>
Output
First textarea is empty despite value attribute; second textarea shows 'Hello' inside the box.
📊

Quick Reference

AttributeDescriptionExample
rowsSets the height in lines
colsSets the width in characters
placeholderShows hint text when empty
nameName for form data
idUnique identifier for label linking
✅

Key Takeaways

Use