Tag textarea

The <textarea> tag in HTML creates a multi-line text input control, allowing users to enter large amounts of text, such as comments, messages, or descriptions. Unlike the <input> element with type="text", <textarea> supports multiple rows and columns.

📌 What Is the <textarea> Tag?

  • It defines a scrollable, resizable text box for user input.
  • Unlike <input>, it can hold multiple lines.
  • It is a form element and usually submitted with the form data.
  • Text placed between <textarea> and </textarea> is the default content.

✅ Basic Syntax

<textarea name="comments" rows="4" cols="50">
Enter your comments here...
</textarea>

🧪 Example 1: Simple Comment Box

<form>
  <label for="feedback">Your Feedback:</label><br>
  <textarea id="feedback" name="feedback" rows="5" cols="40" placeholder="Write your feedback here..."></textarea><br>
  <button type="submit">Submit</button>
</form>

🧩 Important Attributes

AttributeDescription
nameName of the textarea for form submission
rowsNumber of visible text lines (height)
colsNumber of visible character widths (width)
placeholderHint text shown when empty
maxlengthMaximum number of characters allowed
readonlyMakes textarea non-editable
disabledDisables the textarea
wrapHow text wraps inside (soft/hard/off)

🧪 Example 2: Textarea with maxlength and placeholder

<textarea name="bio" rows="6" cols="60" maxlength="500" placeholder="Write a short bio (max 500 characters)"></textarea>

🎨 Styling <textarea>

textarea {
  border: 2px solid #4CAF50;
  border-radius: 5px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  resize: vertical; /* User can resize vertically only */
}

⚠️ Best Practices

  • Use the label element to improve accessibility.
  • Set a reasonable maxlength to limit input size.
  • Use placeholder to guide users but never replace a label.
  • Control resizing with CSS (resize property) for better layout.
  • Validate content both client-side and server-side.

🏁 Summary

The <textarea> tag is essential for capturing large text input from users in forms. It supports multiple lines, customizable size, and various attributes to enhance user experience.