HTML <textarea> Tag – Multi-line Input Field
📌 Introduction
The <textarea> tag is used to create a multi-line text input field.
It is commonly used for:
- Messages
- Comments
- Descriptions
- Feedback forms
Unlike <input>, it allows users to write long text with multiple lines.
🧱 Syntax
<textarea></textarea>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Textarea Example</title>
</head>
<body>
<h2>Contact Us</h2>
<form>
<label>Your Message:</label>
<br />
<textarea rows="5" cols="30"></textarea>
<br /><br />
<button type="submit">Send</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Users can type multiple lines of text
- Box size is controlled by
rowsandcols - Used for longer messages
🎯 Important Attributes
1. rows
<textarea rows="5"></textarea>
✔ Sets height (number of visible lines)
2. cols
<textarea cols="30"></textarea>
✔ Sets width (number of characters)
3. placeholder
<textarea placeholder="Write your message..."></textarea>
✔ Shows hint text
4. name
<textarea name="message"></textarea>
✔ Used when sending form data
🧠 Important Concept
👉 <textarea> is NOT the same as <input>
| Element | Type |
|---|---|
<input> |
Single-line input |
<textarea> |
Multi-line input |
🧩 Example Form
<form>
<label>Name:</label>
<input type="text" /><br /><br />
<label>Message:</label><br />
<textarea rows="6" cols="40" placeholder="Write here..."></textarea
><br /><br />
<button type="submit">Send</button>
</form>
🎨 Styling Example
<textarea style="width:300px; height:100px;"></textarea>
🚫 Common Mistakes
- Using
<textarea>as self-closing ❌ - Forgetting
namein forms ❌ - Using
<input>instead of textarea for long text ❌
🧪 Mini Exercise
Create a form with:
- Name input
- Email input
- A
<textarea>for message - Submit button
- Placeholder text in textarea