How do I create a dropdown in an HTML form?

Use a select element with option children. Add a name attribute to the select so the chosen option is submitted.

How do I make a dropdown required?

Add required to the select and include an empty placeholder option with value=''. The browser then requires a real choice.

What value does a select submit?

The form submits the value attribute from the selected option. If no value is set, browsers submit the option text.

Can an HTML select allow multiple choices?

Yes. Add the multiple attribute, but use it carefully because multi-select controls can be awkward on mobile.

HTML Select Dropdown Form Guide

Use a <select> dropdown when the visitor must choose from a known list and showing every option as radio buttons would take too much space.

Dropdowns are common for topics, departments, countries, budgets, priorities, and categories. A good select field is not just a menu. It has a label, a meaningful name, stable option values, validation, and a fallback path if the selected value controls routing.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="topic">Topic</label>
5
  <select id="topic" name="topic" required>
6
    <option value="">Choose a topic</option>
7
    <option value="sales">Sales</option>
8
    <option value="support">Support</option>
9
    <option value="partnerships">Partnerships</option>
10
  </select>
11

12
  <button type="submit">Send</button>
13
</form>

If the visitor chooses “Support”, the backend receives:

1
topic=support

The visible text can change later, but the submitted value should stay stable if automations depend on it.

Select vs radio buttons

Use radio buttons when the options are few and should be visible immediately. Use a select dropdown when the list is longer or secondary to the main form.

Control	Best for
Radio buttons	2-5 visible choices
Select dropdown	5+ choices or compact layouts
Checkbox group	Multiple independent choices

For a pricing form with three plans, radio buttons are usually clearer. For a country field, a select is usually better.

Required placeholder option

A required select needs an empty option first.

1
<label for="budget">Budget</label>
2
<select id="budget" name="budget" required>
3
  <option value="">Select a budget</option>
4
  <option value="under-1000">Under $1,000</option>
5
  <option value="1000-5000">$1,000 to $5,000</option>
6
  <option value="5000-plus">$5,000+</option>
7
</select>

The empty value="" is what lets the browser detect that the visitor has not made a real selection yet.

Group long option lists

Use optgroup to split long menus into readable sections.

1
<label for="request_type">Request type</label>
2
<select id="request_type" name="request_type" required>
3
  <option value="">Choose a request type</option>
4
  <optgroup label="Sales">
5
    <option value="demo">Book a demo</option>
6
    <option value="quote">Request a quote</option>
7
  </optgroup>
8
  <optgroup label="Support">
9
    <option value="bug">Report a bug</option>
10
    <option value="billing">Billing help</option>
11
  </optgroup>
12
</select>

This keeps the native select control while making the choices easier to scan.

Multiple select fields

HTML supports multiple selection:

1
<label for="integrations">Which integrations do you need?</label>
2
<select id="integrations" name="integrations" multiple>
3
  <option value="email">Email</option>
4
  <option value="webhook">Webhook</option>
5
  <option value="google-sheets">Google Sheets</option>
6
  <option value="discord">Discord</option>
7
</select>

Use this carefully. Multi-select controls are often harder to use than checkbox groups, especially on mobile. If selecting more than one item is important, checkboxes are usually clearer.

Styling select controls

Native select controls vary across browsers. Keep styling modest so the control stays familiar.

1
select {
2
  width: 100%;
3
  border: 1px solid #d6d3d1;
4
  border-radius: 8px;
5
  padding: 10px 12px;
6
  background: white;
7
  color: #1c1917;
8
}
9

10
select:focus {
11
  border-color: #059669;
12
  outline: 3px solid #d1fae5;
13
}

Avoid replacing a simple select with a custom dropdown unless you are ready to rebuild keyboard navigation, focus management, typeahead behavior, and screen reader semantics.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New website inquiry" />
4

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

8
  <label for="topic">Topic</label>
9
  <select id="topic" name="topic" required>
10
    <option value="">Choose a topic</option>
11
    <option value="sales">Sales</option>
12
    <option value="support">Support</option>
13
    <option value="billing">Billing</option>
14
  </select>
15

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

19
  <input type="checkbox" name="botcheck" style="display:none" />
20
  <button type="submit">Send inquiry</button>
21
</form>

The dropdown gives you structured data without forcing the visitor to type a category manually. That makes submissions easier to filter, route, and export.

Use dropdowns with the HTML input fields guide, HTML radio button guide, and HTML form examples.

HTML select dropdowns in forms: complete practical guide

Select vs radio buttons

Required placeholder option

Group long option lists

Multiple select fields

Styling select controls

Frequently asked questions

Ready to add forms to your static site?

Basic select dropdown

Select vs radio buttons

Required placeholder option

Group long option lists

Multiple select fields

Styling select controls

Complete contact form with dropdown routing

Related guides

Frequently asked questions

Ready to add forms to your static site?