The textarea Element for Multi-Line Text

Technical Deep Dive & Specifications

Non-Void Syntax & The Content Duality

While <input> stores its initial default value in the value="..." attribute, <textarea> stores its initial default value as raw text content between its opening and closing tags:

<!-- ❌ WRONG: <textarea> does not have a value attribute in HTML! -->
<textarea value="Initial text"></textarea>

<!-- ✅ CORRECT: Place initial text between opening and closing tags -->
<textarea>Initial text</textarea>

The HTML Parser Whitespace Rules

One of the most nuanced parsing rules in the entire HTML5 specification governs <textarea> content:

                                  HTML PARSER READS <textarea>
                                                |
                                                v
                           Is the very first character a newline (\n)?
                                              /   \
                                        Yes  /     \  No
                                            /       \
                                           v         v
                               [ STRIP FIRST NEWLINE ] [ KEEP FIRST CHAR ]
                                           \         /
                                            \       /
                                             v     v
                                  Parse all remaining text
                                  EXACTLY as written (Keep all spaces/tabs!)

The First Newline Stripping Rule

Because developers frequently write:

<textarea>
Initial content
</textarea>

The HTML parser automatically strips the immediate first newline following <textarea>.

⚠️ The Fatal Indentation Bug:

The parser strips only the first newline—it does NOT strip indentation spaces or tabs on subsequent lines!

<!-- ❌ DISASTER: The textarea will contain 12 leading spaces! -->
<form>
  <div>
    <textarea>
      Welcome to our site!
    </textarea>
  </div>
</form>

<!-- Live textarea.value will be: "      Welcome to our site!\n    " -->

<!-- ✅ CLEAN: Flush text directly without indentation -->
<textarea>Welcome to our site!</textarea>

Geometry Attributes: rows, cols, and wrap

• rows="N": Visible number of text lines (default is 2).
• cols="N": Visible average character width (default is 20).
• wrap="soft" (Default): Text wraps visually on screen, but when the form is submitted, newlines are not injected into the submitted string unless the user explicitly pressed Enter.
• wrap="hard": Automatically injects carriage returns (\r\n) at column boundaries in the submitted payload! (Note: Requires cols to be specified).

CSS Geometry & Resizing: From resize to field-sizing

Traditionally, developers controlled textarea dimensions and user resizability using CSS resize:

/* Prevent users from breaking grid layouts horizontally */
textarea {
  width: 100%;
  resize: vertical; /* Options: none | vertical | horizontal | both */
  min-height: 120px;
  max-height: 500px;
}

🚀 The Modern Game Changer: field-sizing: content

Historically, making a textarea automatically expand in height as the user types required clunky JavaScript listeners calculating scrollHeight.

In modern CSS (CSS Basic User Interface Module Level 4), you can achieve native auto-growing textareas with one line of pure CSS:

/* Pure CSS Auto-Growing Textarea */
textarea.auto-expand {
  field-sizing: content;
  min-height: 3rem;
  max-height: 20rem;
  width: 100%;
}

User types Line 1:  [ Dear Team,                             ] (Height: 3rem)
User types Line 2:  [ Dear Team,                             ]
                    [ Here is the updated roadmap:           ] (Height: 5rem - Auto expanded!)

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 26 (field-sizing: content;): Activates the modern CSS auto-sizing engine. As text wraps or newlines are added, the textarea expands its block size up to max-height without requiring JavaScript calculations.
• Line 40 (<textarea ...>Software architect...</textarea>): Shows correct zero-indentation markup for pre-filled values.
• Line 47 (<textarea placeholder="...">): Provides a multi-line format hint that disappears cleanly when typing begins.
• Line 60 (JSON.stringify(val)): Reveals how the browser captures newline characters as \n in the DOM value property.

Expected Browser Render Output

Multi-Line Text Control

Biography (Standard with resize: vertical)
+-------------------------------------------------------------+
| Software architect passionate about web performance and     |
| accessibility standards.                                    |
|                                                             |
|                                                          // |
+-------------------------------------------------------------+

Meeting Notes (CSS field-sizing: content)
+-------------------------------------------------------------+
| Type multiple lines to watch this box grow automatically... |
+-------------------------------------------------------------+

#f-bio Line Count:     1
Character Length:     78 / 300
JSON Encoded String:  "Software architect passionate about web performance and accessibility standards."