El Atributo SELECTED

El atributo selected en HTML se utiliza para preseleccionar una opción dentro de un elemento <select> (lista desplegable o de selección múltiple). Este atributo es clave para definir valores predeterminados en formularios, mejorando la experiencia del usuario al mostrar opciones preestablecidas. A continuación, te explicamos cómo implementarlo correctamente.

1. Introducción al atributo selected

• Propósito:
  Marcar una opción (<option>) como seleccionada por defecto al cargar la página.

• Elementos compatibles:

  • <option> (dentro de un <select>).

• Tipo de atributo: Booleano (no requiere valor, aunque también puede usarse como selected="selected").

2. Sintaxis básica

<select>
  <option value="valor1">Opción 1</option>
  <option value="valor2" selected>Opción 2 (preseleccionada)</option>
</select>

3. Ejemplos prácticos

Ejemplo 1: Lista desplegable simple

<label for="pais">País:</label>
<select id="pais" name="pais">
  <option value="mx">México</option>
  <option value="es" selected>España</option>
  <option value="ar">Argentina</option>
</select>

Resultado:
La opción "España" aparecerá seleccionada al cargar la página.

Ejemplo 2: Selección múltiple

En listas de selección múltiple (multiple), puedes marcar varias opciones con selected:

<label for="lenguajes">Lenguajes de programación:</label>
<select id="lenguajes" name="lenguajes" multiple>
  <option value="js" selected>JavaScript</option>
  <option value="py" selected>Python</option>
  <option value="java">Java</option>
</select>

Resultado:
Las opciones "JavaScript" y "Python" aparecerán preseleccionadas.

Ejemplo 3: Dinámico con JavaScript

Puedes cambiar el estado selected mediante JavaScript:

<select id="color">
  <option value="rojo">Rojo</option>
  <option value="verde">Verde</option>
  <option value="azul">Azul</option>
</select>

<script>
  // Seleccionar "azul" al cargar la página
  document.getElementById("color").querySelector('[value="azul"]').selected = true;
</script>

4. Buenas prácticas

1. Usar solo una opción selected en listas simples:
   Si el <select> no tiene el atributo multiple, solo la primera opción con selected será considerada.

2. Accesibilidad:

   • Usa <label> asociado al <select>.

   • Si el campo es obligatorio, añade el atributo required.

3. Validación del servidor:
   No confíes únicamente en selected, ya que el usuario puede modificar la selección.

5. Errores comunes

• Marcar múltiples opciones en listas no múltiples:
  Solo la primera opción con selected será válida.

• Olvidar el atributo value:
  El valor enviado al servidor será el texto de la opción si no se define value.

• Usar selected fuera de <option>:
  El atributo no funciona en otros elementos como <input> o <div>.

6. Estilización con CSS

Puedes personalizar la apariencia de las opciones seleccionadas:

/* Opción seleccionada en el dropdown */
option:checked {
  background-color: #4CAF50;
  color: white;
}

/* Estilo del contenedor */
select {
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

7. Casos de uso comunes

1. Formularios de registro:
   Preseleccionar el país del usuario basado en su ubicación.

2. Preferencias guardadas:
   Cargar opciones previamente guardadas (ej.: temas de color).

3. Filtros avanzados:
   Mostrar valores predeterminados en herramientas de búsqueda.

8. Conclusión

El atributo selected es esencial para:

• Mejorar la usabilidad al mostrar opciones relevantes por defecto.

• Reducir pasos del usuario en formularios complejos.

• Personalizar experiencias basadas en datos previos.

Ejemplo final:

<form>
  <label for="plan">Plan de suscripción:</label>
  <select id="plan" name="plan" required>
    <option value="free">Gratis</option>
    <option value="basic" selected>Básico ($10/mes)</option>
    <option value="premium">Premium ($20/mes)</option>
  </select>
  <button type="submit">Guardar</button>
</form>