Select & Textarea — More Input Options

What Are They?

Beyond , HTML offers two more essential form elements: creates a dropdown menu, and </code> creates a multi-line text box. These handle cases where a simple text field isn't enough.</p> <br/> <h3 class="text-lg font-semibold mt-6 mb-2 text-zinc-900">Syntax</h3> <br/> <div class="my-4 overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900"><div class="flex items-center gap-2 border-b border-zinc-700 bg-zinc-800 px-4 py-1.5 text-xs font-medium text-zinc-400"><span class="inline-block h-2.5 w-2.5 rounded-full bg-green-500"></span>html</div><pre class="overflow-x-auto p-4 text-sm leading-relaxed text-green-400" style="tab-size:2"><code class="language-html"><!-- Dropdown menu --> <label for="country">Country:</label> <select id="country" name="country"> <option value="">Choose...</option> <option value="us">United States</option> <option value="ca">Canada</option> <option value="uk">United Kingdom</option> </select> <!-- Multi-line text area --> <label for="message">Message:</label> <textarea id="message" name="message" rows="5" cols="40" placeholder="Write your message here..."></textarea></code></pre></div> <br/> <h2 class="text-xl font-bold mt-7 mb-3 text-zinc-900">How It Works</h2> <br/> <h3 class="text-lg font-semibold mt-6 mb-2 text-zinc-900">Select (Dropdown)</h3> <br/> <div class="my-4 overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900"><div class="flex items-center gap-2 border-b border-zinc-700 bg-zinc-800 px-4 py-1.5 text-xs font-medium text-zinc-400"><span class="inline-block h-2.5 w-2.5 rounded-full bg-green-500"></span>html</div><pre class="overflow-x-auto p-4 text-sm leading-relaxed text-green-400" style="tab-size:2"><code class="language-html"><select name="size"> <option value="small">Small ($5)</option> <option value="medium" selected>Medium ($7)</option> <option value="large">Large ($9)</option> </select></code></pre></div> <br/> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`<select>` creates the dropdown container</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">Each `<option>` is a choice</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`value` is what gets sent to the server (not the displayed text)</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`selected` makes that option pre-selected</li> <br/> <div class="border-l-4 border-blue-400 bg-blue-50 my-3 rounded-r-lg px-4 py-3 text-sm leading-relaxed text-zinc-700"><span class="font-medium">� **Value vs Display Text:** The text between `<option>` tags is what the user sees. The `value` attribute is what gets submitted. Think of them as "display name" vs "internal ID."</span></div> <br/> <h3 class="text-lg font-semibold mt-6 mb-2 text-zinc-900">Textarea (Multi-line Input)</h3> <br/> <div class="my-4 overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900"><div class="flex items-center gap-2 border-b border-zinc-700 bg-zinc-800 px-4 py-1.5 text-xs font-medium text-zinc-400"><span class="inline-block h-2.5 w-2.5 rounded-full bg-green-500"></span>html</div><pre class="overflow-x-auto p-4 text-sm leading-relaxed text-green-400" style="tab-size:2"><code class="language-html"><textarea id="bio" name="bio" rows="4" placeholder="Tell us about yourself..."></textarea></code></pre></div> <br/> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`rows` controls visible height (not max height — user can resize)</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`cols` controls visible width</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">The content BETWEEN the opening and closing tags is the initial value (not a `value` attribute!)</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">Users can resize textareas by default in most browsers</li> <br/> <div class="border-l-4 border-amber-400 bg-amber-50 my-3 rounded-r-lg px-4 py-3 text-sm leading-relaxed text-zinc-700"><span class="font-medium">️ **Important:** `<textarea>` is NOT self-closing! `<textarea />` won't work. Always use `<textarea>...`.

Grouping Options

html

<select name="car">
  <optgroup label="American">
    <option value="ford">Ford</option>
    <option value="gm">General Motors</option>
  </optgroup>
  <optgroup label="Japanese">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

adds category labels to group related options in long dropdowns.

Why Use Select & Textarea?

**Dropdown menus** — Country selectors, size pickers, category filters

**Multi-line input** — Comments, messages, descriptions, bios

**Option groups** — Organized category/subcategory selection

Common Mistakes

❌ Wrong	Why	✅ Right
`` without closing tag</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Self-closing textarea is invalid HTML</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<textarea>...`
Matching `value` to display text on ``	Value should be a short identifier, display text can be longer	`United States of America`
Forgetting a default ``	First option is auto-selected — may confuse users	Add `Select...`

Your Turn!

Create a form with:

A select dropdown for "Favorite Color" with options: Red, Blue, Green

A textarea for "Comments" with 4 rows

A submit button

💡Need a hint? (3 available)

#1<select> + <option> creates a dropdown. Each <option> needs a value

#2<textarea> is NOT self-closing — use <textarea>...</textarea>

#3For <select>, add a default option with value="" for 'Choose...'

🔑Show solution (try it yourself first!)

<label for="color">Favorite Color:</label>
<select id="color" name="color">
  <option value="">Choose a color...</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" placeholder="Enter your comments here..."></textarea>

<button type="submit">Submit</button>

🌐 HTML Editor

↺ Reset👁️ Preview

<label for="country">Country:</label> <select id="country" name="country"> <option value="us">United States</option> <option value="ca">Canada</option> </select> <label for="bio">Bio:</label> <textarea id="bio" name="bio" rows="3">Tell us about yourself...</textarea>

🖼️ Live Preview

🔑 Show solution

← Build a Landing PageNext: The Box Model →