Skip to main content
← πŸ“„ HTML & the platformΒ·Module A3 Β· Lesson 7
TaskBuild a feedback form: <label for='msg'>Message</label> + <textarea id='msg' name='message' rows='5' maxlength='1000' placeholder='Tell us'></textarea>.

<textarea>: multi-line text

60 XP5 min
Theory

The two attributes worth knowing

<textarea name="bio" rows="4" cols="40" placeholder="Tell us about yourself" maxlength="500"></textarea>
  • rows β€” visible lines (height hint). Browser still allows scrolling beyond.
  • cols β€” visible columns (width hint). Most modern designs override with CSS width: 100% instead.
  • maxlength β€” hard cap on characters, same as <input>.
  • placeholder β€” gray hint shown when empty.

NOT self-closing

<textarea /> doesn't work the way <input /> does. <textarea> must have an opening and closing tag β€” and the initial value goes between them:

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

White space matters β€” leading/trailing newlines inside the tag are included in the value.

Resize via CSS, not HTML

textarea { resize: vertical; }   /* allow vertical drag only */
textarea { resize: none; }       /* disable drag handle */

resize: both is the browser default. Disable horizontal resize on narrow layouts to prevent users from breaking your design.

πŸ”’

Sign up to start coding

Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β€” card required, cancel anytime.

Sign up β€” free trial β†’

First 10 lessons in each track are free. No card needed for those.

← PreviousNext lesson β†’

Get one Python or web tip a day β€” by email

Short, hand-written, no spam. Unsubscribe in one click.