Suggest an edit

Improve this article

Refine the answer for “What does <select> do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `<select>` element creates a **dropdown list** (a selection menu) in an HTML form.
It is used when the user needs to **pick one or several options** from a predefined set.

---

### 1. Basic example

```html
<form action="/submit">
  <label for="city">Choose a city:</label>
  <select id="city" name="city">
    <option value="kyiv">Kyiv</option>
    <option value="lviv">Lviv</option>
    <option value="warsaw">Warsaw</option>
  </select>
  <button type="submit">Submit</button>
</form>
```

What happens here:

- `<select>` is the container for the list of options,
- `<option>` is a single choice,
- on form submission, the **value attribute** of the chosen option is sent.

Submission example:

```javascript
city=lviv
```

---

### 2. Main tags and attributes

#### <select> - the list container

| Attribute | Purpose |
|---|---|
| `name` | Field name (key for sending data) |
| `id` | Link to `<label>` |
| `multiple` | Allows selecting **several options** |
| `size` | Shows several items at once (without expanding) |
| `required` | Makes a selection mandatory |
| `disabled` | Disables the whole list |

Multiple selection example:

```html
<select name="fruits" multiple size="3">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
</select>
```

The user can select several items at once while holding **Ctrl / Cmd**.

---

#### <option> - a single choice

| Attribute | Purpose |
|---|---|
| `value` | The value sent to the server |
| `selected` | Makes the option selected by default |
| `disabled` | Disables the option |

Example:

```html
<option value="lviv" selected>Lviv</option>
```

---

#### <optgroup> - grouping options

Lets you split the list into logical groups:

```html
<select name="car">
  <optgroup label="German brands">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Japanese brands">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>
```

---

### 3. How it works on form submission

If the user picks **one option**, the server receives:

```javascript
city=lviv
```

If `multiple` is used and several are chosen:

```javascript
fruits=apple&fruits=banana
```

---

### 4. When to use <select>

Use it if:

- the user must pick **one option from a list** (for example, a city, country or category);
- the number of options is **limited and known in advance**;
- you need a **compact UI element** that saves space.

Do not use `<select>` if there are dozens or hundreds of options (autocomplete / search fits better).

---

### Summary:

| Property | Description |
|---|---|
| Tag | `<select>` |
| Nested tags | `<option>`, `<optgroup>` |
| Purpose | Dropdown list for choosing one or several values |
| Sending data | Via the `name` attribute and the chosen `value` |
| Commonly used attributes | `multiple`, `required`, `disabled`, `size`, `selected` |

---

**In simple terms:**
`<select>` is a **dropdown menu** where the user chooses an option from a list.
If `<input>` is "entry", then `<select>` is "choice".

Markdown · drag & drop images · ⌘B / ⌘I shortcuts455 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.