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.

Guía de formulario desplegable de selección HTML

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>

Si el visitante elige "Soporte", el backend recibe:

1
topic=support

El texto visible puede cambiar más tarde, pero el valor enviado debe permanecer estable si las automatizaciones dependen de ello.

Seleccionar vs botones de opción

Utilice los botones de radio cuando las opciones sean pocas y deban ser visibles inmediatamente. Utilice un menú desplegable de selección cuando la lista sea más larga o secundaria al formulario principal.

Control	Mejor para
Botones de opción	2-5 opciones visibles
Seleccionar menú desplegable	Más de 5 opciones o diseños compactos
Grupo de casillas de verificación	Múltiples opciones independientes

Para un formulario de precios con tres planes, los botones de opción suelen ser más claros. Para un campo de país, una selección suele ser mejor.

Opción de marcador de posición requerido

Una selección requerida necesita una opción vacía primero.

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.

Listas de opciones largas de grupo

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>

Esto mantiene el control de selección nativo y al mismo tiempo hace que las opciones sean más fáciles de escanear.

Múltiples campos de selección

HTML admite selección múltiple:

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>

Utilice esto con cuidado. Los controles de selección múltiple suelen ser más difíciles de usar que los grupos de casillas de verificación, especialmente en dispositivos móviles. Si es importante seleccionar más de un elemento, las casillas de verificación suelen ser más claras.

Aplicar estilo a los controles de selección

Los controles de selección nativos varían según el navegador. Mantenga un estilo modesto para que el control le resulte 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
}

Evite reemplazar una selección simple con un menú desplegable personalizado a menos que esté listo para reconstruir la navegación del teclado, la administración del enfoque, el comportamiento de escritura anticipada y la semántica del lector de pantalla.

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>

El menú desplegable le brinda datos estructurados sin obligar al visitante a escribir una categoría manualmente. Eso hace que los envíos sean más fáciles de filtrar, enrutar y exportar.

Usar menús desplegables con Guía de campos de entrada HTML, Guía de botones de opción HTMLy Ejemplos de formularios HTML.

Menús desplegables de selección HTML en formularios: guía práctica completa

Seleccionar vs botones de opción

Opción de marcador de posición requerido

Listas de opciones largas de grupo

Múltiples campos de selección

Aplicar estilo a los controles de selección

Preguntas frecuentes

¿Listo para agregar formularios a su sitio estático?

Menú desplegable de selección básico

Seleccionar vs botones de opción

Opción de marcador de posición requerido

Listas de opciones largas de grupo

Múltiples campos de selección

Aplicar estilo a los controles de selección

Formulario de contacto completo con enrutamiento desplegable

Guías relacionadas

Preguntas frecuentes

¿Listo para agregar formularios a su sitio estático?