La Etiqueta OPTION

La etiqueta <option> define elementos seleccionables dentro de listas desplegables (<select>) o de sugerencias (<datalist>). Es fundamental para crear formularios interactivos, permitiendo a los usuarios elegir entre múltiples opciones predefinidas.

Casos de uso comunes:

• Menús desplegables (países, categorías).

• Listas de selección múltiple.

• Sugerencias de autocompletado.

Sintaxis básica

La etiqueta <option> se usa dentro de <select>, <optgroup>, o <datalist>:

<select>
  <option>Opción 1</option>
  <option>Opción 2</option>
</select>

Atributos principales

Atributo	Descripción
value	Valor enviado al servidor (si no se incluye, se usa el texto interno).
selected	Marca la opción como seleccionada por defecto.
disabled	Deshabilita la opción (no se puede seleccionar).
label	Texto corto para representar la opción (útil en <optgroup>).

Ejemplos prácticos

Menú desplegable básico

<label for="ciudades">Elige una ciudad:</label>
<select id="ciudades">
  <option value="mx">Ciudad de México</option>
  <option value="ny">Nueva York</option>
  <option value="par">París</option>
</select>

Resultado:

Opción preseleccionada y deshabilitada

<select>
  <option>Elige un color</option>
  <option value="rojo" selected>Rojo</option> <!-- Seleccionado por defecto -->
  <option value="azul">Azul</option>
  <option value="verde" disabled>Verde</option> <!-- No seleccionable -->
</select>

Resultado:

Agrupación con <optgroup>

Organiza opciones en categorías:

<select>
  <optgroup label="América">
    <option>México</option>
    <option>Argentina</option>
  </optgroup>
  <optgroup label="Europa">
    <option>España</option>
    <option>Italia</option>
  </optgroup>
</select>

Resultado:

Selección múltiple

Permite elegir varias opciones con multiple en <select>:

<select multiple>
  <option>Manzana</option>
  <option>Plátano</option>
  <option>Naranja</option>
</select>

Resultado:

Los usuarios pueden seleccionar múltiples frutas manteniendo presionada la tecla Ctrl (Windows) o Cmd (Mac).

Lista de sugerencias (<datalist>)

Crea un campo de entrada con autocompletado:

<label for="lenguajes">Lenguaje de programación:</label>
<input list="lenguajes" id="lenguaje">
<datalist id="lenguajes">
  <option value="JavaScript">
  <option value="Python">
  <option value="Java">
</datalist>

Resultado:

El usuario puede escribir o seleccionar una opción de la lista.

Personalización con CSS

Aunque el estilo de <option> es limitado, puedes:

Cambiar el color de fondo de las opciones deshabilitadas:

option:disabled {
  background-color: #f0f0f0;
}

Modificar el hover (en navegadores que lo permitan):

option:hover {
  background-color: #e0e0e0;
}

Mejores prácticas

Usa value siempre que sea posible: Esto asegura que el servidor reciba datos consistentes (ej: códigos en lugar de textos largos).

Proporciona opciones claras: Evita textos ambiguos como "Seleccione..."; usa <option disabled> para instrucciones:

<select>
  <option disabled selected>Elige un país</option>
  <option>México</option>
</select>

Agrupa opciones largas con <optgroup>: Mejora la usabilidad en listas extensas.

Errores comunes

Olvidar el atributo value: Sin él, el formulario envía el texto visible, lo que puede causar inconsistencias.

<!-- Incorrecto -->
<option>México</option>

<!-- Correcto -->
<option value="MX">México</option>

Usar <option> fuera de <select> o <datalist>: La etiqueta no funcionará correctamente.

Abusar de las opciones deshabilitadas: Puede confundir al usuario si no hay opciones válidas disponibles.

Conclusión

La etiqueta <option> es esencial para crear formularios interactivos y accesibles. Combinada con <select>, <optgroup>, o <datalist>, permite diseñar desde simples menús hasta listas complejas con agrupaciones y autocompletado.

Ejemplo final:

<select>
  <optgroup label="Deportes">
    <option value="ft">Fútbol</option>
    <option value="bs">Básquetbol</option>
  </optgroup>
  <optgroup label="Arte">
    <option value="ms">Música</option>
    <option value="pt">Pintura</option>
  </optgroup>
</select>

Con este tutorial, podrás implementar listas de selección eficientes y bien estructuradas en tus proyectos web.