# Dropdowns, Text Areas and Suggestions

A select makes a dropdown list of options, a textarea gives room for a longer answer, and a datalist suggests answers while still letting the visitor type their own.

Apprentice · HTML · Updated October 31, 2026

## After this lesson you can

- Build a dropdown with select and option, giving each option a value
- Add a text area for a longer answer and a datalist for typed suggestions
- Choose the control that fits a question, such as radio buttons, checkboxes, a dropdown, a datalist, a text area or a typed input

## Key takeaways

- A select with option elements makes a dropdown. Each option's value is what the browser sends, and the text between its tags is what the visitor sees.
- The first option is chosen until the visitor picks another, unless one has the selected attribute. An optgroup puts options under a heading.
- Use radio buttons for a few choices the visitor should see at once, and a dropdown for a long list or a tight space.
- A textarea is a box for a longer answer. It has a closing tag, and rows sets how many lines tall it starts.
- A datalist suggests answers for an input whose list attribute matches the datalist's id, and the visitor can still type anything.

Choosing your state from a list of 50 on a checkout page, writing "the blue door, around the back" for a delivery driver, or starting to type a street and seeing it suggested: you've used all three of this lesson's controls, probably this week.

Slice of Heaven Pizza's order form needs them too: a crust to choose from a list, a box for notes to the driver, and a street box that suggests the streets in town. By the end of this lesson you'll know which control fits each question a form asks.

## Dropdowns: select and option

A dropdown is a menu that stays closed until you need it: one line on the page that opens into a list. In HTML it's a **`<select>`**, and each choice inside it is an **`<option>`**:

```html
<label for="crust">Crust</label>
<select id="crust" name="crust">
  <option value="hand_tossed">Hand-tossed</option>
  <option value="thin" selected>Thin and crispy</option>
  <option value="deep_dish">Chicago deep dish</option>
</select>
```

- **The `name` goes on the `<select>`**, once for the whole list, and the label ties to the `<select>` too.
- **Each option has two kinds of words.** The text between its tags is what the visitor sees. Its `value` is what the browser sends: pick *Chicago deep dish* and the form sends `crust=deep_dish`. An option with no `value` sends its text instead.
- **The first option is chosen** until the visitor picks another, unless one has **`selected`**, like `checked` for radio buttons. Here, *Thin and crispy* shows first.

A `<select>` always has one of its options chosen. Many forms start with an option such as `<option value="">Choose a crust</option>`, which sends an empty answer (`crust=`) until the visitor picks a real one. *Built-in Validation* shows how to make sure they do.

## Groups inside a list

A long list is easier to scan in parts. **`<optgroup>`** puts options under a heading, given in its `label` attribute:

```html
<label for="crust">Crust</label>
<select id="crust" name="crust">
  <optgroup label="Classic">
    <option value="hand_tossed">Hand-tossed</option>
    <option value="thin">Thin and crispy</option>
  </optgroup>
  <optgroup label="Gluten-free">
    <option value="cauliflower">Cauliflower</option>
    <option value="rice_flour">Rice flour</option>
  </optgroup>
</select>
```

The headings show in the open list, and they can't be picked: only options can.

## Radio buttons or a dropdown?

Both let a visitor pick exactly one answer. The difference is what they can see.

- **Radio buttons** show every choice at once, with nothing to open. Use them for a few choices, about five or fewer, especially when people should compare them: three pizza sizes with their prices.
- **A dropdown** hides its choices until it's opened. Use it for a long list that would crowd the page, or where people know what they're looking for: their state, a country, a month.

A `<select>` can take the `multiple` attribute to allow several picks, but on a computer that means holding Ctrl or Command while clicking, which few visitors know. For several picks, checkboxes are friendlier.

**Try it.** In a file named `dropdowns.html`, with the page skeleton and a `<form>` with no `action`, add the crust dropdown with its optgroups and a `<button>Order</button>`. Send it, and find `crust=` in the address bar. Then add `selected` to *Cauliflower* and reload the page.

## Text areas: room for a longer answer

A text input is one line. For a few sentences, such as directions for the driver, use a **`<textarea>`**:

```html
<label for="driver_notes">Notes for the driver</label>
<textarea id="driver_notes" name="driver_notes" rows="4"></textarea>
```

- **`rows`** sets how many lines tall the box starts. The visitor can type more (the box scrolls), and in most browsers they can drag its corner to make it bigger.
- **It has a closing tag**, unlike `<input>`. Leave it out, or write `<textarea />`, and the browser treats the rest of your page as the box's starting text.
- **The text between the tags is the starting text**, sent as it is unless the visitor changes it. That's why the tags sit right next to each other: spaces between them would show up in the box.

## Suggestions: datalist and the list attribute

Some questions have likely answers, and also answers you can't predict. Slice of Heaven delivers mostly to a few streets in town, but a new street can always appear. A **`<datalist>`** offers suggestions for an input as the visitor types, and still lets them type anything:

```html
<label for="street">Street</label>
<input type="text" id="street" name="street" list="town_streets">
<datalist id="town_streets">
  <option value="Maple Avenue"></option>
  <option value="Main Street"></option>
  <option value="Riverside Drive"></option>
</datalist>
```

The connection is the input's **`list` attribute**, which names the datalist's `id`. Spell them differently and nothing breaks, but no suggestions appear. The datalist sends nothing of its own: the input's `name` and whatever is typed are what's sent.

Here's the difference from a dropdown: a `<select>` only takes its options, and a datalist only suggests them.

![An order form's street box with "Ma" typed in it, and a list below it offering Maple Avenue and Main Street](https://www.ask-codey.com/lessons/TODO)

## Check yourself

2 questions to try on the lesson page.

## So what

A form asks questions, and every question has a control that fits it best: one choice from a few, any number of choices, one from a long list, a suggestion, or a few sentences in the visitor's own words. Pick the right one, and the form feels like it was made for the person filling it in.

## Key terms

- [&lt;select>](https://www.ask-codey.com/glossary/select-html)
- [&lt;option>](https://www.ask-codey.com/glossary/option)
- [&lt;optgroup>](https://www.ask-codey.com/glossary/optgroup)
- [&lt;textarea>](https://www.ask-codey.com/glossary/textarea)
- [&lt;datalist>](https://www.ask-codey.com/glossary/datalist)
- [list attribute](https://www.ask-codey.com/glossary/list-attribute)

## Cheat sheets

- [Dropdowns, Text Areas and Suggestions](https://www.ask-codey.com/cheat-sheets/html-forms-select-textarea-and-datalist-cheat-sheet)

## Related

- [Checkboxes, Radio Buttons and Fieldsets](https://www.ask-codey.com/lessons/html-forms-checkboxes-radios-and-fieldsets)
- [Input Types for Email, Numbers, Dates and More](https://www.ask-codey.com/lessons/html-forms-input-types)
- [Exercise: A Pizza Order Form](https://www.ask-codey.com/lessons/exercise-html-pizza-order-form)

Source: https://www.ask-codey.com/lessons/html-forms-select-textarea-and-datalist