HTML Academy · Lesson

Textarea for Multi-line Input

Collect multi-line text with the textarea element.

Textarea for Multi-line Input is a free HTML Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The textarea Element

The <textarea> element accepts multi-line text input:

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="Enter your message here..."
></textarea>
<!-- textarea is NOT a void element -- it has a closing tag -->
<!-- Default content goes between the tags, not in a value attribute -->

rows and cols Attributes

rows and cols set the initial visible size:

<!-- rows: height in lines (default: 2) -->
<!-- cols: width in characters (default: 20) -->
<textarea rows="6" cols="50">...</textarea>

<!-- Better: use CSS for sizing -->
<textarea style="width: 100%; height: 150px; resize: vertical;">

Setting Default Content

Default text goes between the opening and closing tags:

<textarea name="bio">
Hello! I am a developer who loves HTML.
</textarea>
<!-- Note: whitespace inside textarea IS rendered -->
<!-- The newline after the opening tag will appear in the textarea -->
<!-- Avoid whitespace between tags if you don't want it -->

resize with CSS

Control user resizing with the CSS resize property:

textarea {
  resize: vertical;    /* allow only vertical resize */
  /* resize: horizontal -- only horizontal */
  /* resize: both      -- both directions (default) */
  /* resize: none      -- prevent resizing */

  width: 100%;
  min-height: 120px;
  max-height: 400px;
  padding: 0.5rem;
  box-sizing: border-box;
}

Auto-growing Textarea

Make a textarea grow as the user types with JavaScript:

<textarea id="auto-grow" rows="3" style="overflow: hidden;"></textarea>

<script>
const ta = document.getElementById('auto-grow');
ta.addEventListener('input', () => {
  ta.style.height = 'auto';
  ta.style.height = ta.scrollHeight + 'px';
});
</script>

maxlength and minlength

Limit text length in a textarea:

<label for="bio">Bio (max 500 characters)</label>
<textarea
  id="bio"
  name="bio"
  maxlength="500"
  minlength="10"
  rows="4"
></textarea>

<!-- Live character count: -->
<small id="char-count">0/500</small>
<script>
document.getElementById('bio').addEventListener('input', function() {
  document.getElementById('char-count').textContent =
    this.value.length + '/500';
});
</script>

spellcheck Attribute

The spellcheck attribute controls spell checking:

<!-- Enable (default for textarea) -->
<textarea spellcheck="true">...</textarea>

<!-- Disable (for code editors, technical input) -->
<textarea spellcheck="false">...</textarea>

wrap Attribute

The wrap attribute controls how line wrapping is submitted:

<!-- wrap="soft" (default): text wraps visually but newlines not added -->
<textarea wrap="soft">...</textarea>

<!-- wrap="hard": newlines inserted at wrap points when submitted -->
<!-- Requires cols to be set -->
<textarea wrap="hard" cols="40">...</textarea>

readonly and disabled

Make textarea non-editable:

<!-- readonly: visible, selectable, submitted -->
<textarea readonly>This is read-only text.</textarea>

<!-- disabled: cannot interact, not submitted -->
<textarea disabled>Disabled textarea.</textarea>

Textarea Accessibility

Accessibility notes for textareas:

Always associate a <label> using for/id
Use aria-describedby to link help text or character counters
Announce character limit changes to screen readers with live regions

<label for="comment">Comment</label>
<textarea id="comment" aria-describedby="comment-hint"></textarea>
<p id="comment-hint">Maximum 200 characters.</p>

Styling Textarea

Common textarea styling:

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-family: inherit;    /* match surrounding font */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
textarea:focus {
  outline: none;
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0,112,243,0.2);
}

Quick Check

How do you set pre-filled text in a textarea?

Recap: Textarea

Textarea essentials:

Multi-line text input with a closing tag
Default content between opening and closing tags (not value attribute)
rows and cols set initial size; prefer CSS
maxlength and minlength control length
resize: vertical in CSS for controlled resizing
Auto-grow: set height: scrollHeight on input event

Frequently asked questions

Is the “Textarea for Multi-line Input” lesson free?

Yes — the full text of “Textarea for Multi-line Input” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Textarea for Multi-line Input”?

Collect multi-line text with the textarea element. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Textarea for Multi-line Input” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy