HTML Textarea

Previously, form="id" and button form* attributes answered ownership and submit routing. Textarea is a different job: a multi-line text control for comments, messages, and notes. Single-line <input type="text"> wraps poorly for paragraphs. Use <textarea> when the user needs room to write more than one line.

Why textarea exists

Contact forms, support tickets, bios, and review boxes need scrolling height and soft line breaks. A textarea keeps that text as one named field on submit. It still wants a visible label, a name for the payload, and optional size or limit hints — but its content model differs from input: text lives between the tags.

Direct answer

1) Write <textarea id="msg" name="msg" rows="5"></textarea> (add cols or CSS as you like).
2) Connect a <label for="msg">…</label> (or wrap the control).
3) Put any default text between the opening and closing tags — not in a value attribute.
4) Optional helpers: placeholder, maxlength, readonly, disabled, required, wrap.
5) This is multi-line entry — not the previous lesson’s form= association or formaction overrides.

📊 Textarea attributes beginners use

Attribute	Role	Beginner tip
name	Submit key	Required if the text should post with the form
id	Label hook	Match label for= for accessible naming
rows	Visible height hint	Lines of height before scrolling
cols	Visible width hint	Prefer CSS width for responsive layouts
placeholder	Soft hint	Disappears when the user types
maxlength	Character cap	Browser-enforced upper bound
readonly / disabled	Lock vs mute	readonly still submits; disabled usually does not
wrap	Soft/hard wrap	Affects how line breaks are submitted (soft vs hard)

Feedback form: labeled message box

A short feedback form keeps email as a single-line input and the message as a textarea. Default starter text sits between the tags so the user can edit or replace it.

Labeled feedback textarea

html

<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>

<button type="submit">Send feedback</button>
</form>

Reading the feedback demo

textarea (not input) is the multi-line control
id="msg" pairs with label for="msg"
name="msg" keys the submitted paragraph
rows="6" hints visible height; cols="40" hints width (CSS can override)
Default text Thanks for reading — sits between the tags
placeholder shows only when the field is empty of user/default content depending on browser rules — prefer clear labels either way
Previous-lesson form= is unused here — both fields nest inside the form

Sizing, limits, and wrap

A second demo shows a bio field with maxlength, wrap="soft", and a note that CSS often replaces cols for fluid layouts. readonly appears on a summary box the user can copy but not edit.

Bio size limits and readonly note

html

<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>

<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>

Reading the sizing demo

maxlength="280" caps typed length in supporting browsers
wrap="soft" keeps visual wraps without forcing CR/LF into the submitted value the way hard can
Inline CSS width + resize:vertical refines size beyond cols
readonly lets users see/select text; they should not edit it
Both fields still need name if they should submit
Next lesson covers <select> for choosing from a list — not free-form paragraphs

Choosing textarea vs input

One short line (name, email, title): prefer <input type="text|email|…">
Paragraphs / comments / messages: <textarea>
Size with rows (and CSS); treat cols as a legacy width hint
Default content → between tags; do not use value="…" like input
Still wire label + name like other controls
Nested inside <form> when layout allows; form="id" still works if you must detach (previous lesson)
Do not confuse this control with formaction / ownership attributes

Practice — build and resize

Copy the feedback demo; remove the default text between tags and add a short starter sentence of your own.
Change rows from 6 to 3 and notice the visible height.
Add maxlength="500" on the message and try pasting a long paragraph.
Replace cols with a CSS width (keep rows) for a fluid layout.
Temporarily put value="Hello" on the textarea and confirm it does not replace between-tag content the way input does — then remove value.
Write one sentence: textarea holds multi-line text between its tags; input uses value.
Peek ahead: list choices belong in <select> next — not a textarea of options.

Easy mistakes

Putting default text in value="…" instead of between the tags
Forgetting name so the message never submits
Skipping a label (placeholder is not a full accessible name)
Using <input type="text"> when the user needs several lines
Confusing this lesson with previous form= / formaction ownership routing
Relying only on cols for responsive width
Setting disabled when you meant readonly (disabled fields often omit from submit)

Summary

<textarea> = multi-line text entry
Label it; give it a name for submit
Default text sits between the opening and closing tags
Hint size with rows / CSS; optional maxlength, placeholder, readonly
Not the previous lesson’s form-association attributes
Next: <select> for picking from a list

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top