← HTML & CSS

Textarea

An HTML element that creates a multi-line text input. Unlike <input>, it requires opening and closing tags. Default content goes between them.

Part of: HTML and CSS Journey — Module 31

What it does: 'Your notes here.' is pre-filled default content placed between the tags. Unlike <input>, textarea is never self-closing. name="comment" ensures the textarea value is sent as comment=entered_text when the form is submitted. rows sets the number of visible text lines. The CSS height property can also control size, but rows is the HTML attribute. HTML tag names must be lowercase. <TEXTAREA> is non-standard — use <textarea>. Just like <input>, a <textarea> should have an id matching a label's for attribute for accessibility.

Common mistakes: HTML tag names must be lowercase. <TEXTAREA> and </TEXTAREA> should be <textarea> and </textarea>. The name attribute value must be in double quotes: name="msg", not name=msg without quotes.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Textarea (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

True or false: <textarea> is self-closing like <input>.

FalseTrue

Matches

<TEXTAREA name="msg">Hello</TEXTAREA>

↓

Tag names must be lowercase — <TEXTAREA> and </TEXTAREA> should be <textarea> and </textarea>

Applying

Meanings

Term

Meaning

An HTML element that creates a multi-line text input. Unlike <input>, it requires opening and closing tags. Default content goes between them.

Practice

Testing

Gaps

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

Check Answer

Spots

1<TEXTAREA name="msg">Hello</TEXTAREA>

2<input type="text" name="q">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. True or false: <textarea> is self-closing like <input>.

A. False ✓

B. True

<textarea> requires both an opening and a closing tag. Any text between the tags becomes the default content.

2. Which attribute sets the visible height of a textarea in lines?

A. rows ✓

B. height

rows sets the number of visible text lines. The CSS height property can also control size, but rows is the HTML attribute.

3. True or false: <TEXTAREA> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <TEXTAREA> is non-standard — use <textarea>.

4. How do you set the default text shown inside a textarea?

A. Place the text between the opening and closing tags ✓

B. Use the value attribute

Any text placed between <textarea> and </textarea> becomes the pre-filled default. There is no value attribute on textarea.

5. Which attribute sets the visible width of a textarea in character widths?

A. cols ✓

B. width

cols sets the width in average character widths. The CSS width property can also be used, but cols is the HTML attribute.

Match the Pairs

<textarea name="msg" rows="5"> Hello world. </textarea> → A multi-line text input — rows sets its height, and 'Hello world.' is pre-filled as the default text

<textarea name="bio" cols="40"> </textarea> → cols sets the visible width in character widths — this textarea shows about 40 characters across

<textarea> requires opening and closing tags — default content goes between them → <textarea name="notes"> Your notes here. </textarea>

The name attribute on textarea identifies its value when the form is submitted → <form> <textarea name="comment" rows="4"> </textarea> </form>

<TEXTAREA name="msg">Hello</TEXTAREA> → Tag names must be lowercase — <TEXTAREA> and </TEXTAREA> should be <textarea> and </textarea>

<textarea name="bio"/> → <textarea> is not self-closing — it requires a separate closing </textarea> tag

Key Term

<textarea>

An HTML element that creates a multi-line text input. Unlike <input>, it requires opening and closing tags. Default content goes between them.

Fill in the Blanks

1. <textarea name="msg">Hello</textarea>

Hint: Type the element name that creates a multi-line text input

2. <textarea name="bio">Bio text</textarea>

Hint: Type the element name for the closing tag of a multi-line text area

3. <textarea name="msg" rows="5">Text</textarea>

Hint: Type the attribute name that sets the visible height in lines

4. <textarea name="n" cols="40">Text</textarea>

Hint: Type the attribute name that sets the visible width in characters

5. <form> <textarea name="bio" rows="4"> </textarea> </form>

Hint: Type the element name used to create a multi-line text input inside a form

Spot the Error

Question 1

A <TEXTAREA name="msg">Hello</TEXTAREA>

B <input type="text" name="q">

C <button>Submit</button>

Line A — HTML tag names must be lowercase. <TEXTAREA> and </TEXTAREA> should be <textarea> and </textarea>.

Question 2

A <form>

B <textarea name=msg>Enter text</textarea>

C <button>Submit</button>

D </form>

Line B — The name attribute value must be in double quotes: name="msg", not name=msg without quotes.

Question 3

A <form>

B <input type="text" name="q">

C <textarea name="body" rows=5>

D <button>Save</button>

E </form>

Line C — The rows attribute value must be in double quotes: rows="5", not rows=5 without quotes.

Question 4

A <form>

B <textarea name="bio">

C Tell us about yourself.

D <textarea>

E </form>

Line D — The closing tag is missing its forward slash. It should be </textarea> not <textarea>.

Question 5

A <form>

B <textarea name="a">One</textarea>

C <textarea name="b">Two</textarea>

D <textarea name="c">Three</textarea>

E <Textarea name="d">Four</Textarea>

F </form>

Line E — HTML tag names must be lowercase. <Textarea> and </Textarea> should be <textarea> and </textarea>.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?