<textarea>

Level 5 — Forms & User Input A multi-line text input field.

1. Prerequisites

• <input> — The single-line sibling to the textarea.
• Element vs. Tag — Notice that <textarea> is NOT a void element!
• Nesting — Since default text values are nested between the opening and closing tags.

2. Term Category

Form Element (Universal Browser Support): <textarea> is a fundamental concept in this technology stack. Level 5 — Forms & User Input

3. Explanation

(1) Design Motivation — "Why did we design this?"

An <input type="text"> is great for short data like a first name or an email address. But what if the user needs to write a 5-paragraph review, a long comment, or a bug report? A single-line input box would force them to type blindly off the edge of the screen. The W3C created the <textarea> element for multi-line text input. Unlike <input>, it allows the user to press the "Enter" key to create physical line breaks in their text. It also usually features a native "drag handle" in the bottom right corner, allowing the user to click and drag to make the box physically larger on their screen.

(2) Reality Metaphor

An <input type="text"> is a single blank line on a form (e.g., "Name: ______"). A <textarea> is a large, empty ruled box at the bottom of the form that says "Please provide any additional comments below."

(3) Code Examples

Short Snippet

<!-- Use the 'rows' and 'cols' attributes to set the initial physical size -->
<label for="feedback">Your Feedback:</label>
<textarea id="feedback" name="user_feedback" rows="4" cols="50"></textarea>

Fuller Example

<form action="/submit-comment">
  <label for="bio">Author Biography:</label>
  
  <!-- Any text placed BETWEEN the tags becomes the default value! -->
  <textarea id="bio" name="author_bio" rows="6">
Hi! My name is John.
I have been writing code for 5 years.
  </textarea>
  
  <button type="submit">Save Bio</button>
</form>

4. Common Mistakes & Pitfalls

Mistake 1: Trying to use a value attribute

The mistake: Trying to set the default text of a <textarea> using the value attribute (like you do with an <input>).

Why it's wrong: The <textarea> is NOT a void element. It has an opening and closing tag. Because of this, it does not use a value attribute. Instead, any text you place between the tags becomes the default value.

Incorrect:

<textarea name="comment" value="Default text here"></textarea>

Fix:

<textarea name="comment">Default text here</textarea>

Mistake 2: Leaving whitespace between the tags

The mistake: Formatting your HTML code by putting the closing </textarea> tag on a new, indented line.

Why it's wrong: Because everything between the tags is treated as the exact value of the input, if you leave spaces or line breaks in your HTML code, the browser will literally insert those spaces into the text box! The user will have to manually delete your code's whitespace before they can start typing.

Incorrect:

<!-- The user will see a bunch of blank spaces in the box! -->
<textarea name="comment">
</textarea>

Fix:

<!-- Keep the tags touching if you want it to be empty! -->
<textarea name="comment"></textarea>

Mistake 3: Attempting to Set <textarea> Initial Value Using value="..." Attribute

The mistake: Writing <textarea value="Initial Text"></textarea>.

Why it's wrong: <textarea> does NOT use a value attribute for initial content! Initial text MUST be placed between opening and closing tags <textarea>Initial Text</textarea>.

Incorrect:

<textarea value="Hello World"></textarea> <!-- ❌ Value attribute is ignored! -->

Fix:

<textarea>Hello World</textarea> <!-- Initial text placed inside content tags -->

Mistake 4: Forgetting to Restrict Textarea Resizing in CSS (resize: none vs resize: vertical)

The mistake: Allowing default <textarea> free 2D resizing breaking website layout containers.

Why it's wrong: Unrestricted horizontal resizing allows users to drag textareas outside container boundaries. Restrict resizing to vertical-only resize: vertical or resize: none.

Incorrect:

/* Default textarea permits horizontal resizing that breaks container widths */

Fix:

textarea {
  resize: vertical; /* Permits vertical expansion only */
}

5. Practice Exercises

Exercise 1: Multi-line Comment Field with label, rows, cols, and maxlength

Scenario: An author constructs a multi-line customer feedback comment box using <textarea>.

Requirements:

1. Create <textarea> with explicit <label>.
2. Set rows="5" and cols="40".
3. Set maxlength="500" constraint.

<div class="form-group">
  <label for="feedback-text">Customer Feedback (Max 500 characters)</label>
  <textarea id="feedback-text" name="feedback" rows="5" cols="40" maxlength="500" placeholder="Type your comments here..." required></textarea>
</div>

Exercise 2: Resizable vs Fixed Textarea Formatting using CSS

Scenario: Controls textarea resizing behavior via CSS resize property.

Requirements:

1. Set CSS resize: vertical on textarea.

<label for="user-notes">Personal Notes</label>
<textarea id="user-notes" name="notes" rows="4" class="vertical-resize-only"></textarea>

Exercise 3: Preserving User Line Breaks and Character Counts

Scenario: Configures textarea line wrapping and character counter limits.

Requirements:

1. Set wrap="soft" and maxlength.

<label for="bio-text">Short Biography</label>
<textarea id="bio-text" name="bio" rows="3" maxlength="200" wrap="soft"></textarea>

6. Related Terms

• <input> — The single-line equivalent for short data.
• placeholder Attribute — The visual cue comparison.
• value Attribute (in Form Fields) — The value differences from textareas.
• name Attribute (in Form Fields) — The textarea key name parameter.
• <label> — The associated text label.

7. Key Takeaways

• The <textarea> element is used for long-form, multi-line text input.
• It is NOT a void element; it has opening and closing tags.
• You set its default text by placing content between the tags, not by using a value attribute.
• Be careful not to leave accidental whitespace between the tags in your HTML code.