Elemento select en HTML

Elemento select en HTML

El elemento <select> crea un control de selección desplegable o lista que permite a los usuarios elegir entre varias opciones predefinidas. Se usa principalmente en formularios para recolectar datos del usuario de manera estructurada.

<select name="pais">
  <option value="mx">México</option>
  <option value="es">España</option>
  <option value="co">Colombia</option>
  <option value="ar">Argentina</option>
</select>

Este elemento funciona en conjunto con el elemento <option>, que define cada una de las opciones disponibles para seleccionar. Es común utilizar el atributo value para definir el valor que se enviará al servidor cuando se seleccione esa opción.

Atributos principales del elemento select

• name: Define el nombre del control, utilizado para referenciar el elemento en el envío del formulario.
• id: Proporciona un identificador único para el elemento, útil para vincularlo con etiquetas <label>.
• multiple: Permite seleccionar múltiples opciones (convierte el desplegable en una lista).
• size: Define cuántas opciones son visibles a la vez en la lista.
• required: Indica que se debe seleccionar una opción para poder enviar el formulario.
• disabled: Desactiva el control para que no pueda ser utilizado.
• autofocus: Hace que el elemento reciba el foco automáticamente al cargar la página.

Atributos del elemento option

• value: El valor que se enviará al servidor cuando esta opción sea seleccionada.
• selected: Establece la opción como seleccionada por defecto.
• disabled: Deshabilita la opción para que no pueda ser seleccionada.
• label: Proporciona un nombre corto para la opción (se usa raramente).

Select con opción por defecto

<select name="provincia">
  <option value="">Selecciona una provincia</option>
  <option value="bcn">Barcelona</option>
  <option value="mad">Madrid</option>
  <option value="val" selected>Valencia</option>
  <option value="sev">Sevilla</option>
</select>

Select con selección múltiple

<label for="lenguajes">Selecciona los lenguajes que conoces:</label>
<select id="lenguajes" name="lenguajes[]" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
  <option value="python">Python</option>
  <option value="ruby">Ruby</option>
</select>

Usando optgroup para agrupar opciones

El elemento <optgroup> permite organizar las opciones en grupos lógicos, mejorando la usabilidad del control:

<label for="autos">Elige un modelo de auto:</label>
<select id="autos" name="auto">
  <optgroup label="Vehículos Europeos">
    <option value="volvo">Volvo</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Vehículos Americanos">
    <option value="ford">Ford</option>
    <option value="chevrolet">Chevrolet</option>
    <option value="dodge">Dodge</option>
  </optgroup>
  <optgroup label="Vehículos Asiáticos">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    <option value="hyundai">Hyundai</option>
  </optgroup>
</select>

Select deshabilitado y con opciones deshabilitadas

<select name="curso" disabled>
  <option value="html5">HTML5</option>
  <option value="css3">CSS3</option>
  <option value="js">JavaScript</option>
</select>

<select name="plan">
  <option value="">Selecciona un plan</option>
  <option value="free">Plan Gratuito</option>
  <option value="basic">Plan Básico</option>
  <option value="pro" disabled>Plan Pro (No disponible)</option>
  <option value="enterprise">Plan Empresarial</option>
</select>

Ejemplo completo con validación

<form action="/procesar" method="post">
  <div>
    <label for="pais">País de residencia:</label>
    <select id="pais" name="pais" required>
      <option value="">-- Selecciona un país --</option>
      <optgroup label="América">
        <option value="mx">México</option>
        <option value="us">Estados Unidos</option>
        <option value="ca">Canadá</option>
        <option value="br">Brasil</option>
        <option value="ar">Argentina</option>
      </optgroup>
      <optgroup label="Europa">
        <option value="es">España</option>
        <option value="fr">Francia</option>
        <option value="uk">Reino Unido</option>
        <option value="it">Italia</option>
      </optgroup>
      <optgroup label="Asia">
        <option value="jp">Japón</option>
        <option value="cn">China</option>
        <option value="in">India</option>
      </optgroup>
    </select>
    <span class="error">Por favor, selecciona tu país</span>
  </div>

  <div>
    <label for="intereses">Áreas de interés (puedes seleccionar varias):</label>
    <select id="intereses" name="intereses[]" multiple size="5">
      <option value="tech">Tecnología</option>
      <option value="health">Salud y Bienestar</option>
      <option value="finance">Finanzas</option>
      <option value="edu">Educación</option>
      <option value="art">Arte y Cultura</option>
      <option value="travel">Viajes</option>
      <option value="food">Gastronomía</option>
    </select>
    <small>Mantén presionada la tecla Ctrl (o Cmd en Mac) para seleccionar múltiples opciones.</small>
  </div>

  <button type="submit">Enviar</button>
</form>

Buenas prácticas

• Siempre usa <label>: Asocia cada <select> con una etiqueta para mejorar la accesibilidad.

  <label for="ciudad">Ciudad:</label>
  <select id="ciudad" name="ciudad">
    <!-- opciones -->
  </select>
  

• Proporciona una opción vacía o de ayuda: Incluye una primera opción como instrucción, especialmente si el campo es opcional.

  <select name="categoria">
    <option value="">-- Selecciona una categoría --</option>
    <!-- otras opciones -->
  </select>
  

• Usa optgroup para listas largas: Mejora la organización y usabilidad al agrupar opciones relacionadas.
• Establece un ancho adecuado: Asegúrate de que el control tenga suficiente ancho para mostrar completamente las opciones más largas.

  select {
    width: 100%;
    max-width: 300px;
  }
  

• Considera alternativas para listas muy largas: Si tienes muchas opciones (como países), considera usar un campo de texto con autocompletado o una solución JavaScript más avanzada.