HTML select and datalist: Dropdown Menus and Suggestions

Use select when visitors must choose from a fixed list.

index.html

HTML

<form>
  <label for="format">Format</label>
  <select id="format" name="format">
    <option value="paperback">Paperback</option>
    <option value="hardback" selected>Hardback</option>
    <option value="audio">Audiobook</option>
  </select>
</form>

Each choice is an option.
value is what gets sent. The text between the tags is what the visitor sees.
selected makes an option the starting choice.

Grouping options

index.html

HTML

<select name="genre" aria-label="Genre">
  <optgroup label="Fiction">
    <option>Mystery</option>
    <option>Fantasy</option>
  </optgroup>
  <optgroup label="Non-fiction">
    <option>Travel</option>
    <option>Biography</option>
  </optgroup>
</select>

Choosing more than one

Add multiple to allow several choices. Often a group of checkboxes is easier to use.

datalist: suggestions

datalist offers suggestions in a text field while still allowing any text.

index.html

HTML

<label for="author">Favourite author</label>
<input id="author" name="author" list="authors">
<datalist id="authors">
  <option value="Mina Okafor">
  <option value="Leo Hartmann">
</datalist>

lightbulb

A first empty option

For a required select, start with an option that says “Choose…” and has an empty value, so people do not submit the first item by accident.