Coding/Learn/html/dropdowns and textareas
HTML Beginner Course
01.Introduction to HTML
02.Anatomy of an HTML Element
03.The Sacred HTML5 Skeleton
04.Headings (h1 to h6)
05.Paragraphs, Line Breaks & Dividers
06.Text Formatting & Emphasis
07.Hyperlinks & Navigation (<a>)
08.Images & The Sacred Alt Text (<img>)
09.Ordered & Unordered Lists (<ul>, <ol>, <li>)
10.Block vs Inline Elements
11.Generic Containers (<div> & <span>)
12.Semantic HTML (<header>, <nav>, <main>, <footer>)
13.Tables (<table>, <tr>, <th>, <td>)
14.Native Audio & Video Elements
15.The Invisible Brain (<head> & Meta Tags)
16.Interactive Forms (<form>)
17.Input Types (<input>)
18.Accessible Labels & Submit Buttons
19.Textareas & Select Dropdowns (<textarea>, <select>)
20.Capstone: Building Your First Web Profile Page
Course Certificate0%

Complete all lessons to earn

LearnTextareas & Select Dropdowns (<textarea>, <select>)
19 / 20 0%
Lesson 19 of 20
5 mins read

Textareas & Select Dropdowns (<textarea>, <select>)

PreviousNext Lesson
In Plain English

When single-line inputs aren't enough, HTML gives you <textarea> for multi-line essays/comments and <select> with <option> tags for drop-down menus.

The Mental Model

"<input type="text"> is a single line on an index card. <textarea> is an entire blank notebook page. <select> is a restaurant menu where you pick one entree from a dropdown list."

Deep Dive: How It Works

<textarea rows="4" cols="50">: Multi-line text box. Unlike <input>, <textarea> requires a closing </textarea> tag!

Initial content in textarea: Any text placed between <textarea>Default text</textarea> becomes the starting content.

<select name="country">: The dropdown container.

<option value="us">United States</option>: The individual selectable options.

selected attribute: Add <option value="py" selected> to set the default selected dropdown option.

Syntax Blueprint

<select name="role">
  <option value="dev">Developer</option>
  <option value="des">Designer</option>
</select>
<textarea rows="4" placeholder="Your message..."></textarea>

Select menu with options and multi-line textarea container.

PointCore Rules to Remember

Point star
Textarea Has a Closing Tag: Always close <textarea>...</textarea>—never write self-closing <textarea />!
Point star
Option Values: The value="..." attribute is what gets sent to your backend server.
Point star
Resizing Controls: CSS resize: vertical allows users to expand textareas up and down comfortably.

Common Beginner Traps & How to Fix Them

Mistake:Putting placeholder inside textarea content

Why it happens: Writing <textarea>Type here</textarea> treats "Type here" as real user text that they have to backspace.

How to fix: Use the placeholder="Type here" attribute and leave the tag interior empty: <textarea placeholder="Type here"></textarea>.

Pro Tip: Add the multiple attribute to <select multiple> to let users pick multiple items using Cmd/Ctrl!

Live Interactive Example

Hit Run Code to see it live
Dropdowns and Feedback Textareas
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Live Browser Preview
Click "Preview / Apply" to view the rendered output.
How it works: The <select> renders a dropdown menu with HTML pre-selected, and <textarea> accepts multi-line text.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Build a dropdown menu with two options

  • PointCreate a <select name="theme"> containing two <option> items: "Dark" and "Light"
1
2
Browser Preview & Output
Click "Check HTML" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

PreviousNext Lesson
Overview100 SheetLearnCertificates