La Etiqueta SELECT

Se utiliza para crear listas desplegables o menús de selección, permitiendo a los usuarios elegir una o varias opciones de una lista predefinida.

La etiqueta <select> en HTML se utiliza para crear listas desplegables o menús de selección, permitiendo a los usuarios elegir una o varias opciones de una lista predefinida. Es esencial en formularios para recopilar datos como países, categorías o preferencias. A continuación, te enseñamos cómo implementarla correctamente.

Sintaxis básica

La estructura básica incluye:

  • <select>: Contenedor principal.

  • <option>: Elementos de la lista.

  • Atributos como name, multiple, size y required.

Ejemplo mínimo:

<select name="coches">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
</select>

Resultado:

Atributos clave

Atributo Descripción
name Identifica el campo al enviar el formulario (ejemplo: name="pais").
multiple Permite seleccionar múltiples opciones (usa Ctrl o Cmd).
size Define cuántas opciones se ven sin desplegar (ejemplo: size="3").
disabled Deshabilita el menú.
required Obliga al usuario a seleccionar una opción antes de enviar el formulario.

Ejemplo con multiple y size:

<select name="colores" multiple size="3">
  <option>Rojo</option>
  <option>Verde</option>
  <option>Azul</option>
</select>

Resultado:

Agrupar opciones con <optgroup>

Usa <optgroup> para organizar opciones en grupos con una etiqueta:

<select name="marcas">
  <optgroup label="Alemanas">
    <option>Audi</option>
    <option>BMW</option>
  </optgroup>
  <optgroup label="Japonesas">
    <option>Toyota</option>
    <option>Honda</option>
  </optgroup>
</select>

Resultado:

Estilizar con CSS

Personaliza el diseño del <select>:

select {
  padding: 8px;
  width: 200px;
  border: 2px solid #007bff;
  border-radius: 5px;
  background: #f8f9fa;
  font-family: Arial;
}

/* Estilo al enfocar */
select:focus {
  outline: none;
  border-color: #0056b3;
}

Resultado:

Accesibilidad

Etiquetas: Usa <label> para describir el propósito del menú:

<label for="pais">País:</label>
<select id="pais" name="pais">
  <option>España</option>
  <option>México</option>
</select>

Atributo aria-label: Útil si no hay una etiqueta visible:

<select aria-label="Selecciona tu género">
  <option>Masculino</option>
  <option>Femenino</option>
</select>

Interacción con JavaScript

Obtener el valor seleccionado:

<select id="ciudades">
  <option>Madrid</option>
  <option>Barcelona</option>
</select>

<script>
  const select = document.getElementById("ciudades");
  select.addEventListener("change", () => {
    console.log("Selección:", select.value);
  });
</script>

Añadir opciones dinámicamente:

const nuevaOpcion = new Option("Valencia", "valencia");
document.getElementById("ciudades").add(nuevaOpcion);

Envío de formularios

Al enviar un formulario, el valor seleccionado se envía como nombre=valor. Por ejemplo:

<form action="/procesar" method="post">
  <select name="fruta">
    <option value="manzana">Manzana</option>
    <option value="pera">Pera</option>
  </select>
  <button type="submit">Enviar</button>
</form>

Si el usuario selecciona "Manzana", se enviará: fruta=manzana.

Buenas prácticas

  1. Ordena las opciones: Coloca las más usadas al principio.

  2. Evita listas largas: Usa <optgroup> o campos de búsqueda si hay muchas opciones.

  3. Valores claros: Usa value para datos procesables (ejemplo: value="es" para "España").

  4. Pruebas multiplataforma: El diseño puede variar entre navegadores y dispositivos.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    select {
      padding: 10px;
      width: 250px;
      border: 2px solid #2ecc71;
      border-radius: 8px;
      margin: 10px;
    }
    label {
      font-weight: bold;
      color: #34495e;
    }
  </style>
</head>
<body>
  <form>
    <label for="pelicula">Elige tu película favorita:</label>
    <select id="pelicula" name="pelicula">
      <optgroup label="Acción">
        <option value="matrix">Matrix</option>
        <option value="john_wick">John Wick</option>
      </optgroup>
      <optgroup label="Drama">
        <option value="forrest_gump">Forrest Gump</option>
        <option value="interestelar">Interestelar</option>
      </optgroup>
    </select>
    <button type="submit">Enviar</button>
  </form>
</body>
</html>

Conclusión

La etiqueta <select> es fundamental para crear formularios interactivos y accesibles. Al combinarla con <option>, <optgroup>, CSS y JavaScript, puedes diseñar menús de selección eficientes y adaptados a cualquier necesidad.

Recuerda:

  • Usa <label> para mejorar la accesibilidad.

  • Agrupa opciones relacionadas con <optgroup>.

  • Valida siempre los datos del lado del servidor.

¡Ahora estás listo para implementar listas desplegables profesionales en tus proyectos web!