Drop-down list

The <select> element is used to create a drop-down list.

Only the value(s) of the selected option(s) will be forwarded.

Use the multiple attribute to specify whether multiple options can be selected at once.

<!-- Single option (selection persisted as a string) -->
<form action="https://submit-form.com/your-form-id" method="POST">
  <select name="car">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <button type="submit">Submit</button>
</form>

<!-- Multiple options (selection persisted as an array)-->
<form action="https://submit-form.com/your-form-id" method="POST">
  <select name="vegetables" multiple>
    <option value="tomato">Tomato</option>
    <option value="carrot">Carrot</option>
    <option value="potato">Potato</option>
    <option value="kale">Kale</option>
  </select>
  <button type="submit">Submit</button>
</form>

TIP

When a multiple select has nothing selected, the field is omitted from the submission entirely, so the key will not appear in your data.

Grouped options

Use <optgroup> to organize related options under a heading.

<select name="car">
  <optgroup label="European">
    <option value="volvo">Volvo</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="American">
    <option value="ford">Ford</option>
    <option value="tesla">Tesla</option>
  </optgroup>
</select>

Autocomplete suggestions

A <datalist> provides suggestions for a plain text input. Unlike <select>, the user can still type any value.

<form action="https://submit-form.com/your-form-id" method="POST">
  <label for="country">Country</label>
  <input list="countries" id="country" name="country" />
  <datalist id="countries">
    <option value="Belgium"></option>
    <option value="France"></option>
    <option value="Germany"></option>
    <option value="Netherlands"></option>
  </datalist>
  <button type="submit">Submit</button>
</form>