Select & Textarea

`<select>` for dropdown choices, `<textarea>` for multi-line text. Both have their quirks.

3 min read Level 1/5 #html#forms#select

What you'll learn

Build a `<select>` with `<option>`s
Group options with `<optgroup>`
Configure a `<textarea>` properly

Beyond <input>, two other form elements come up constantly.

`<select>` — Dropdown

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Pick one…</option>
  <option value="US">United States</option>
  <option value="UK">United Kingdom</option>
  <option value="IN">India</option>
</select>

The first option with an empty value is a useful placeholder (combined with required to force a real choice).

Grouped Options

<select name="continent">
  <optgroup label="Americas">
    <option value="US">United States</option>
    <option value="BR">Brazil</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="UK">United Kingdom</option>
    <option value="DE">Germany</option>
  </optgroup>
</select>

Multiple Selection

<select name="skills" multiple size="5">
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <option value="react">React</option>
</select>

multiple lets the user pick several. size shows the list as a scrolling box instead of a dropdown.

Default Selection

<option value="US" selected>United States</option>

`<textarea>` — Multi-Line Text

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" cols="40" maxlength="500"></textarea>

rows / cols — visible size (in lines and characters)
maxlength — hard limit
placeholder — hint text
required — must be filled

<textarea> content goes BETWEEN the tags, NOT in a value attribute:

<textarea name="message">Default text goes here</textarea>

Resize

By default, the user can resize a textarea. To restrict:

textarea {
  resize: vertical;     /* or none, horizontal, both */
}

Up Next

Built-in form validation.

Form Validation →