Textarea in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will the textarea display initially?

Consider this HTML code:

<textarea>Hello
World!</textarea>

What text will appear inside the textarea when viewed in a browser?

HTML

<textarea>Hello
World!</textarea>

A

Hello
World!

B Hello\nWorld!

C Hello World!

D

!dlroW
olleH

💡 Hint

Remember that inside HTML, new lines inside textarea are rendered as line breaks.

The textarea preserves line breaks inside its content. The \n inside the HTML source is interpreted as a new line, so the text appears on two lines: 'Hello' on the first line and 'World!' on the second.

📝 Syntax

intermediate

Which textarea attribute controls the visible width?

You want to set the visible width of a textarea to 40 characters. Which attribute should you use?

A width="40"

B cols="40"

C size="40"

D length="40"

💡 Hint

Think about the standard HTML attribute for textarea width in characters.

The 'cols' attribute sets the visible width of a textarea in characters. Other options like 'width' or 'size' are not valid for textarea.

❓ accessibility

advanced

Which option correctly associates a label with a textarea for accessibility?

You want to make sure screen readers correctly identify the textarea. Which HTML snippet correctly links the label to the textarea?

A <label name="comment">Comment:</label><textarea id="comment"></textarea>

B <label>Comment:<textarea></textarea></label>

C <textarea aria-label="Comment"></textarea>

D <label for="comment">Comment:</label><textarea id="comment"></textarea>

💡 Hint

The 'for' attribute on label should match the textarea's id.

Option D uses the 'for' attribute on the label matching the textarea's 'id', which is the standard way to associate labels with form controls for accessibility. Option D nests textarea inside label which is valid but less explicit. Option D uses aria-label which is valid but less preferred than visible label. Option D uses 'name' on label which is invalid.

❓ layout

advanced

How to make a textarea fill its container width responsively?

You want a textarea to always fill 100% of its container's width and adjust on window resize. Which CSS rule achieves this?

HTML

<textarea></textarea>

A textarea { width: 100%; box-sizing: border-box; }

B textarea { width: 100vw; }

C textarea { max-width: 100%; }

D textarea { width: auto; }

💡 Hint

Consider how padding and borders affect width and how to include them.

Setting width to 100% makes the textarea fill its container width. Adding 'box-sizing: border-box' ensures padding and borders are included inside that width, preventing overflow. Option A uses viewport width which ignores container size. Option A only limits max width but doesn't set width. Option A uses auto width which depends on content.

🧠 Conceptual

expert

What happens if you set both rows and style height on a textarea?

Given this HTML:

<textarea rows="4" style="height: 200px;"></textarea>

Which statement is true about the textarea's height?

HTML

<textarea rows="4" style="height: 200px;"></textarea>

A The browser throws an error because of conflicting height settings.

B The rows attribute sets the height and style height is ignored.

C The inline style height (200px) overrides the rows attribute height.

D The textarea height is the sum of rows height plus 200px.

💡 Hint

CSS styles override HTML attributes when both affect the same property.

The 'rows' attribute sets the height in terms of text lines, but an explicit CSS height style overrides this. So the textarea will be 200px tall regardless of rows. Browsers do not throw errors for this.