REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<select>

AI & DATA SCIENCE // select-tag

The <select> element creates a dropdown control that lets the user choose one (or, with multiple, several) predefined <option> values.

Syntax

<select name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Deep Dive Course

**`<select>`** presents a closed set of choices as `<option>` children, rendered as a native dropdown by the browser. Adding the **`multiple`** attribute turns it into a multi-select list (usually rendered as a scrollable box instead of a dropdown) where users can pick several options at once (typically via Ctrl/Cmd+click). Use `<optgroup>` inside a `<select>` to visually group related options under a label.

1Understanding <select>

`<select>` presents a closed set of choices as <option> children, rendered as a native dropdown by the browser. Adding the `multiple` attribute turns it into a multi-select list (usually rendered as a scrollable box instead of a dropdown) where users can pick several options at once (typically via Ctrl/Cmd+click). Use <optgroup> inside a <select> to visually group related options under a label.

💡

A native <select> automatically gets keyboard support (arrow keys, type-ahead-to-jump-to-an-option) and correct mobile rendering for free — recreating that yourself with styled <div>s is a lot of extra work to match the same accessibility.

editor.html

<label for="lang">Language</label>
<select id="lang" name="lang">
  <option value="en">English</option>
  <option value="es">Spanish</option>
  <option value="fr">French</option>
</select>

localhost:3000

2Practical Example

Here is a real-world application of <select> showing how it is used in production HTML.

editor.html

<!-- Multi-select list -->
<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

localhost:3000

3Best Practices

Follow these guidelines when working with <select>:

1. Use <select> when the user must choose from a fixed, known set of options

2. Add the multiple attribute only when picking more than one option genuinely makes sense

3. Group related options with <optgroup> in long dropdowns for easier scanning

⚠️

Tip: A native <select> automatically gets keyboard support (arrow keys, type-ahead-to-jump-to-an-option) and correct mobile rendering for free — recreating that yourself with styled <div>s is a lot of extra work to match the same accessibility.

editor.html

<label for="lang">Language</label>
<select id="lang" name="lang">
  <option value="en">English</option>
  <option value="es">Spanish</option>
  <option value="fr">French</option>
</select>

localhost:3000

Examples

Example 01Basic Usage

<label for="lang">Language</label>
<select id="lang" name="lang">
  <option value="en">English</option>
  <option value="es">Spanish</option>
  <option value="fr">French</option>
</select>

Example 02Advanced Example

<!-- Multi-select list -->
<select name="skills" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Best Practices

Use as a scrollable list box showing several options at once (rather than a collapsed dropdown), and the user can select more than one option — usually by holding Ctrl (Windows/Linux) or Cmd (Mac) while clicking additional items, or shift-clicking a range. The form then submits all selected values under the same name, which server-side code typically receives as an array/list rather than a single value.

Related Functions

option-tagoptgroup-tag