Curso HTML 9.2 Select, option y optgroup (listas desplegables)

Introducción a Listas Desplegables (select, option y optgroup)

Las listas desplegables en HTML se definen con la etiqueta <select>. Esta permite al usuario escoger uno o varios valores de entre un conjunto de opciones representadas con <option>. Si deseamos agrupar opciones relacionadas, usamos <optgroup>. A continuación se describen en detalle los elementos, atributos y ejemplos de uso.

1. La etiqueta select

La etiqueta <select> crea un control de formulario que contiene un listado de valores. Sus atributos más importantes son:

Atributo	Descripción	Valores posibles
name	Nombre del control para envío en formularios.	Cadena de texto
id	Identificador único para etiquetas <label> y scripts.	Cadena de texto
multiple	Permite selección de varios elementos simultáneamente.	multiple
size	Número de opciones visibles sin desplegar.	Entero ≥ 1
disabled	Deshabilita todo el control.	disabled
required	Hace obligatorio seleccionar un valor.	required
autofocus	Enfoca el control al cargar la página.	autofocus
form	Permite asociar el select a un form distinto.	ID de formulario

2. La etiqueta option

Cada <option> es una opción seleccionable dentro de un <select>. Sus atributos clave:

Atributo	Descripción	Valores posibles
value	Valor que se envía si está seleccionada.	Cadena de texto
label	Texto alternativo para mostrar.	Cadena de texto
selected	Marca la opción como seleccionada por defecto.	selected
disabled	Inhabilita la opción.	disabled
hidden	No se muestra en la lista desplegable.	hidden

3. La etiqueta optgroup

Permite agrupar visualmente varias opciones bajo un mismo título:

Atributo	Descripción	Valores posibles
label	Texto del grupo.	Cadena de texto
disabled	Inhabilita todas las opciones del grupo.	disabled

4. Ejemplos Prácticos

4.1 Ejemplo básico: selección única

<label for='ciudades'>Elige tu ciudad:</label>
<select id='ciudades' name='ciudad' required>
  <option value='' disabled selected>-- Selecciona --</option>
  <option value='madrid'>Madrid</option>
  <option value='barcelona'>Barcelona</option>
  <option value='sevilla'>Sevilla</option>
</select>

4.2 Uso de optgroup

<label for='vehiculos'>Vehículos:</label>
<select id='vehiculos' name='vehiculo'>
  <optgroup label='Terrestres'>
    <option value='coche'>Coche</option>
    <option value='moto'>Moto</option>
  </optgroup>
  <optgroup label='Aéreos'>
    <option value='avion'>Avión</option>
    <option value='helicoptero'>Helicóptero</option>
  </optgroup>
</select>

4.3 Selección múltiple

Con multiple el usuario puede elegir varias opciones. Opcionalmente podemos usar size para mostrar varias filas.

<label for='lenguajes'>Lenguajes de programación:</label>
<select id='lenguajes' name='lenguajes[]' multiple size='5'>
  <option value='js' selected>JavaScript</option>
  <option value='py'>Python</option>
  <option value='java'>Java</option>
  <option value='csharp'>C#</option>
  <option value='go'>Go</option>
</select>

4.4 Opción deshabilitada y oculta

<select name='estado'>
  <option value='nuevo'>Nuevo</option>
  <option value='usado' disabled>Usado (agotado)</option>
  <option value='reacondicionado' hidden>Reacondicionado (próximamente)</option>
</select>

5. Accesibilidad y buenas prácticas

Siempre asocia un <label> con for al id del <select> para mejorar la navegación con lector de pantallas.
Usa required en campos obligatorios para que el navegador valide antes del envío.
Proporciona un primer <option> con texto guía y value='' disabled selected para indicar que el usuario debe elegir.
Controla la usabilidad en dispositivos móviles ajustando size o evitando multiple si no es necesario.
Incluye atributo disabled o hidden en <option> para estados no válidos o futuros.

6. Poblado dinámico con JavaScript

Podemos alterar las opciones en tiempo de ejecución:

<select id='ciudades2' name='ciudad2'></select>

<script>
  // Array de datos simulados
  const ciudades = [
    { valor: 'valencia', texto: 'Valencia' },
    { valor: 'granada', texto: 'Granada' },
    { valor: 'bilbao', texto: 'Bilbao' }
  ];

  const select = document.getElementById('ciudades2');
  // Crear primera opción guía
  const guia = document.createElement('option');
  guia.value = '';
  guia.textContent = '-- Selecciona ciudad --';
  guia.disabled = true;
  guia.selected = true;
  select.appendChild(guia);

  // Añadir dinámicamente
  ciudades.forEach(ciudad => {
    const opt = document.createElement('option');
    opt.value = ciudad.valor;
    opt.textContent = ciudad.texto;
    select.appendChild(opt);
  });
</script>

Conclusión

Las listas desplegables (<select>, <option>, <optgroup>) son componentes esenciales en formularios HTML. Conociendo sus atributos y buenas prácticas garantizamos interfaces accesibles, usables y fáciles de mantener. Además, su manipulación dinámica permite interfaces interactivas adaptadas al usuario.