HTML select: Dropdowns, Multiple Selection, and Submitted Values

HTML <select> is a form control for choosing values from choices defined by option. It allows one selection by default; multiple enables multiple selections. The select element’s name identifies the submitted field, and the selected option element’s value supplies its value.

Distinguish field names, visible labels, and submitted values

Match a label element’s for to the select element’s id to associate a description with the control. The id identifies the element within the document, while name becomes the submitted data key. Visible option text can differ from value: choosing Web development can submit web. If you omit value, the option’s text is used as its value.

In an ordinary single-selection control, omitting selected generally makes the first available option the initial selection. To require an explicit choice, give the first option an empty value and add required, as below. A visible instruction does not satisfy the required selection when its value is empty.

Complete example: required and multiple selections

Save the code as select-demo.html and open it in a browser. JavaScript prevents submission and displays the current form data on the page. This exercise does not send data to an actual server or external site.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Checking select values</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Inspect selected values</h1>
  <form id="demo">
    <label for="topic">Topic of interest (required)</label>
    <select id="topic" name="topic" required>
      <option value="" selected>Choose a topic</option>
      <optgroup label="Development">
        <option value="web">Web development</option>
        <option value="data">Data processing</option>
      </optgroup>
    </select>
    <label for="skills">Skills to learn (multiple selection allowed)</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">Disabled field</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">Cannot be changed</option>
    </select>
    <button type="submit">Show values</button>
    <button type="reset">Reset</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Press Show values without choosing a topic. The browser’s required-field validation prevents submission.
2. Choose Web development and press Show values. The output contains topic with web, and two skills entries with html and css. The disabled locked field is excluded.
3. Change the skills selection and check again. Each selected option produces another entry named skills. If you deselect every option, there may be no skills entry.
4. Press Reset. The topic returns to the empty instruction option, the skills return to HTML and CSS, and the output is cleared.

multiple and size are different attributes

multiple allows multiple values, while size specifies the number of visible rows. Increasing size does not automatically enable multiple selection. The keyboard combinations depend on the operating system. Desktop controls may support Ctrl or Command with a click, or Shift for range selection; mobile devices may provide a separate selection screen.

When reading multiple selections in JavaScript, select.value gives only the first selected value. Iterate over selectedOptions or call getAll('skills') on a FormData instance, for example new FormData(form).getAll('skills'), to retrieve every value. On the server, follow your framework’s parsing rules for repeated fields with the same name.

Use disabled, required, and selected carefully

disabled prevents interaction and excludes the field from submitted data. A select has no native equivalent of an input element’s readonly attribute, so adding readonly does not lock it. Disabling a control in the browser also does not replace authorization checks on the server.

required, disabled, multiple, and selected are boolean attributes. Even selected="false" leaves the attribute present, so the option can still be treated as initially selected. Remove the attribute or set its corresponding JavaScript property to false to make it false. A reset restores the initial selections declared in the HTML; it does not necessarily clear every selection.

autofocus can focus the control automatically, but use it only when needed, considering the reader’s position and mobile keyboard behavior. Native controls and popups vary by browser and operating system, so retaining label associations and standard keyboard interaction is useful for ordinary forms. The MDN select reference and MDN option reference explain the detailed rules.