The <textarea> tag defines a multi-line text input. Use it for comments, descriptions, long text. It has an opening and closing tag; content between them is the default value. Use name for form submission.

<textarea>

Step 2

Example: <label for="msg">Message</label><textarea id="msg" name="message" rows="4" cols="40"></textarea>. Use rows and cols for size (or CSS). Use placeholder for hint text. Use <label for="id"> for accessibility.

<textarea id="msg" name="message" rows="4" cols="40" placeholder="Your message"></textarea>

Step 3

Attributes: disabled, readonly, required, maxlength, minlength. Content between <textarea> and </textarea> is the initial value (not placeholder). Use wrap="soft" (default) or "hard" for line breaks on submit.

<textarea name="bio" rows="3">Default text</textarea>

Step 4

In the browser, textarea renders as a resizable box. Users can type multiple lines. The value is submitted with the form under the name attribute. Always pair with a label for accessibility.

<textarea name="comment" rows="3" placeholder="Comment..."></textarea>

Step 5

Which attribute is required for the textarea value to be submitted with the form?

name

Step 6

Correct! The name attribute identifies the field when the form is submitted. Use id for label for= and for accessibility.

<textarea name="msg"></textarea>

Step 7

You now know <textarea>. Complete the challenges below to master multi-line text input!

textarea.html

1 / 7

📝

Tutor:The <textarea> tag defines a multi-line text input. Use it for comments, descriptions, long text. It has an opening and closing tag; content between them is the default value. Use name for form submission.

⭐ 0 EXP

Textarea Mastery

Multi-line text input: name, rows, cols, label.

Concept 1: The Textarea Tag

The <textarea> tag defines a multi-line text input. Use it for comments, descriptions, long text. Content between opening and closing tags is the default value. Use name for form submission.

System Check

Which attribute is needed for the textarea value to be submitted with the form?

idnamerowsplaceholder

Community Holo-Net

Textarea Patterns

Using label, rows, placeholder? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <textarea> Tag

Pascual Vila

Frontend Instructor.

The <textarea> tag defines a multi-line text input. Use it for comments, descriptions, or any long text. It has an opening and closing tag; content between them is the default value. Use the name attribute so the value is submitted with the form.

Attributes

rows and cols set the visible size (or use CSS). placeholder shows hint text when empty. disabled, readonly, required, maxlength, minlength for behavior and validation. Use <label for="id"> with matching id on the textarea for accessibility.

Best practices

Always pair textarea with a label. Use placeholder for hints; use content between tags for a real default value. Prefer CSS for sizing when possible; rows/cols are fallbacks.

Textarea Tag Glossary

<textarea>: Multi-line text input. Has opening and closing tag; content between them is the default value. Use name for form submission.
name / rows / cols: name = submitted with form. rows and cols = visible size. Use label for= and id on textarea for accessibility.
placeholder / disabled / readonly: placeholder = hint when empty. disabled = not editable, not submitted. readonly = not editable but submitted.

📖 INDEX