HTML · Quick Reference

Lesson 21 — Select & Textarea Cheat Sheet

HTML

In one line: A <select> renders a dropdown menu. It contains <option> children — each with a value (what gets submitted) and display text (what the user sees).

Key Ideas

1The <select> Element. A <select> renders a dropdown menu. It contains <option> children — each with a value (what gets submitted) and display text (what the user sees).

2Multi-Select & Size. Add multiple to let users select more than one option (hold Ctrl/Cmd to select multiple). Add size to show N options visible at once without a dropdown.

3The <textarea> Element. Unlike <input>, <textarea> is a two-tag element that accepts multi-line text. Its initial content goes between the tags (not in a value attribute). Control...

4datalist — Autocomplete Suggestions. <datalist> provides a list of suggestions for a text input without restricting the user to those values. Connect a datalist to an input via matching id and list ...

Code Examples

<label for="country">Country</label>
<select id="country" name="country" required>
  <!-- Empty first option acts as a placeholder -->
  <option value="" disabled selected>Select a country…</option>
  <option value...

<select name="course">
  <optgroup label="Beginner">
    <option value="html-basics">HTML Fundamentals</option>
    <option value="css-basics">CSS Fundamentals</option>
  </optgroup>
  <optgroup label="Advan...

<label for="skills">Skills (hold Ctrl/Cmd for multiple)</label>
<select id="skills" name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js...