The HTML select dropdown, explained.

The basic select

<label for="service">Service</label>
<select id="service" name="service">
  <option value="new-site">New website</option>
  <option value="redesign">Redesign</option>
  <option value="support">Ongoing support</option>
</select>

• name on the <select> is the key; the chosen option’s value is what is sent. Here the form sends service=redesign.
• Without a value attribute, an option sends its visible text instead. That is often simplest for a contact form, because the text is what you want to read.
• The first option is selected by default, unless another has the selected attribute.
• A visible label linked with for and id tells everyone what the list is for.

A placeholder and a required choice

A select has no placeholder attribute. Instead, make the first option the prompt and give it an empty value. With required on the select, the browser treats that first empty option as a placeholder and will not send the form until the visitor picks something else.

<label for="topic">What is it about?</label>
<select id="topic" name="topic" required>
  <option value="">Choose a topic</option>
  <option>Sales question</option>
  <option>Support</option>
  <option>Billing</option>
</select>

Group long lists with optgroup

<optgroup> adds headings inside the list. The group labels cannot be selected themselves; only the options inside them are sent.

<label for="city">Nearest office</label>
<select id="city" name="city">
  <optgroup label="Europe">
    <option>London</option>
    <option>Berlin</option>
  </optgroup>
  <optgroup label="North America">
    <option>Toronto</option>
    <option>New York</option>
  </optgroup>
</select>

Several choices with multiple

The multiple attribute turns the dropdown into a list box where visitors can pick more than one option, holding Ctrl (or Cmd on a Mac) to add to the selection. size sets how many rows are visible. Each chosen option is sent under the same name.

<label for="extras">Also interested in</label>
<select id="extras" name="extras" multiple size="4">
  <option>Hosting</option>
  <option>Copywriting</option>
  <option>SEO</option>
  <option>Photography</option>
</select>

Many people do not know the Ctrl and Cmd shortcut, and it is awkward on phones. For a handful of options, a group of checkboxes is usually easier to use.

Read the selection in JavaScript

select.value is the value of the selected option, and selectedOptions lists every selected option, which you need for a multiple select. The change event fires when the choice changes.

const select = document.querySelector('#service');

console.log(select.value);                       // the selected option's value
console.log(select.selectedOptions[0].text);     // its visible text

select.addEventListener('change', () => {
  console.log('Now selected:', select.value);
});

// Every chosen value in a multiple select
const extras = [...document.querySelector('#extras').selectedOptions].map(o => o.value);

Style a select

The closed box styles like an input: width, font, padding, border and background all work. The open list of options is drawn by the browser and the operating system, and can barely be styled in most browsers today. Chromium browsers are adding a fully customisable select, but it is new and not yet everywhere, so design for the native list.

select {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 10px 36px 10px 12px;
  border: 1px solid #c9c7d6;
  border-radius: 8px;
  background: #fff;
}

Suggestions instead of a fixed list

If visitors should be able to type their own answer as well as pick a suggestion, use an <input> with a <datalist>. The suggestions appear as they type, and any text is accepted.

<label for="city-input">City</label>
<input id="city-input" name="city" list="cities" />
<datalist id="cities">
  <option value="London"></option>
  <option value="Toronto"></option>
  <option value="New York"></option>
</datalist>

A form that sends

This contact form posts to Heartdove, which saves every message, emails you an alert and tracks it until it is delivered or bounces. Because the dropdown is named subject, the chosen topic becomes the subject line of the alert and the heading of the message in your inbox. A multiple select or checkbox group arrives as one field, such as “Hosting, SEO”.

<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required />

  <label for="subject">What is it about?</label>
  <select id="subject" name="subject" required>
    <option value="">Choose a topic</option>
    <option>Sales question</option>
    <option>Support</option>
    <option>Something else</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send message</button>
</form>

Replace YOUR_ACCESS_KEY with your key from a free Heartdove form, or build the whole form in the contact form generator.

Questions

Keep reading

• HTML radio buttons
• The HTML checkbox
• The HTML label
• All HTML input types