HTML select: desplegables, selección múltiple y valores enviados

HTML <select> es un control de formulario para elegir entre las opciones definidas por option. Por defecto permite una sola elección; multiple habilita varias. El atributo name de select identifica el campo enviado y el atributo value de la opción elegida determina su valor.

Distinguir nombres de campo, etiquetas visibles y valores enviados

Haz coincidir el atributo for del elemento label con el atributo id del elemento select para asociar una descripción al control. id identifica el elemento en el documento, mientras que name se convierte en la clave de los datos enviados. El texto visible puede diferir de value: elegir Desarrollo web puede enviar web. Si omites value, el texto de la opción se usa como valor.

En un control de selección única ordinario, omitir selected generalmente hace que la primera opción disponible sea la selección inicial. Para requerir una elección explícita, da a la primera opción un value vacío y añade required, como se muestra a continuación. Una instrucción visible no satisface la selección requerida cuando su valor está vacío.

Ejemplo completo: selecciones requeridas y múltiples

Guarda el código como select-demo.html y ábrelo en un navegador. JavaScript evita el envío y muestra los datos actuales del formulario en la página. Este ejercicio no envía datos a un servidor real ni a un sitio externo.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comprobar los valores de select</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>Comprobar los valores seleccionados</h1>
  <form id="demo">
    <label for="topic">Tema de interés (obligatorio)</label>
    <select id="topic" name="topic" required>
      <option value="" selected>Elige un tema</option>
      <optgroup label="Desarrollo">
        <option value="web">Desarrollo web</option>
        <option value="data">Procesamiento de datos</option>
      </optgroup>
    </select>
    <label for="skills">Tecnologías que aprender (selección múltiple permitida)</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">Campo deshabilitado</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">No se puede cambiar</option>
    </select>
    <button type="submit">Mostrar valores</button>
    <button type="reset">Restablecer</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. Presiona Mostrar valores sin elegir un tema. La validación de campo obligatorio del navegador impide el envío.
2. Elige Desarrollo web y presiona Mostrar valores. La salida contiene topic con web, y dos entradas skills con html y css. El campo deshabilitado locked se excluye.
3. Cambia la selección de habilidades y verifica nuevamente. Cada opción seleccionada produce otra entrada llamada skills. Si deseleccionas todas las opciones, puede que no haya ninguna entrada skills.
4. Presiona Restablecer. El tema vuelve a la opción de instrucción vacía, las habilidades vuelven a HTML y CSS, y la salida se borra.

multiple y size son atributos diferentes

multiple permite múltiples valores, mientras que size especifica el número de filas visibles. Aumentar size no habilita automáticamente la selección múltiple. Las combinaciones de teclado dependen del sistema operativo. Los controles de escritorio pueden soportar Ctrl o Command con un clic, o Shift para la selección de rango; los dispositivos móviles pueden ofrecer una pantalla de selección separada.

Al leer selecciones múltiples en JavaScript, select.value solo devuelve el primer valor seleccionado. Itera sobre selectedOptions o llama a getAll('skills') en una instancia de FormData, por ejemplo new FormData(form).getAll('skills'), para obtener cada valor. En el servidor, sigue las reglas de análisis de tu framework para campos repetidos con el mismo nombre.

Usa disabled, required y selected con cuidado

disabled previene la interacción y excluye el campo de los datos enviados. Un select no tiene un equivalente nativo del atributo readonly de un elemento input, por lo que agregar readonly no lo bloquea. Deshabilitar un control en el navegador tampoco reemplaza las verificaciones de autorización en el servidor.

required, disabled, multiple y selected son atributos booleanos. Incluso selected="false" deja el atributo presente, por lo que la opción aún puede ser tratada como seleccionada inicialmente. Elimina el atributo o establece su propiedad correspondiente de JavaScript en false para que sea falsa. Un restablecimiento restaura las selecciones iniciales declaradas en el HTML; no necesariamente borra todas las selecciones.

autofocus puede enfocar el control automáticamente, pero úsalo solo cuando sea necesario, considerando la posición del lector y el comportamiento del teclado móvil. Los controles nativos y las ventanas emergentes varían según el navegador y el sistema operativo, por lo que conservar las asociaciones de label y la interacción estándar del teclado es útil para formularios ordinarios. La de select en MDN y la de option en MDN explican las reglas detalladas.