Validación HTML: Un elemento "select" con un atributo "required", y sin un atributo "multiple", y sin un atributo "size" cuyo valor sea mayor que "1", debe tener un elemento hijo "option".

Acerca de este problema HTML

La especificación HTML aplica esta regla porque un elemento <select> obligatorio necesita opciones para que el usuario pueda elegir. Sin ningún hijo <option>, el elemento carece de sentido semántico: es un desplegable sin nada que seleccionar, pero el formulario exige una selección antes del envío. Esto crea una situación imposible para el usuario y un estado ambiguo para el navegador.

Esta regla se aplica específicamente cuando se cumplen las tres condiciones siguientes:

El atributo required está presente.
El atributo multiple no está presente.
El atributo size está ausente o establecido en 1 (el valor por defecto para un <select> de selección única).

Cuando multiple está establecido o size es mayor que 1, el <select> se comporta de manera diferente (como una lista en lugar de un desplegable), y la especificación relaja esta restricción. Pero para el desplegable estándar de selección única, al menos un <option> es obligatorio.

Por qué esto importa

Usabilidad: Un desplegable obligatorio sin opciones no ofrece a los usuarios ninguna forma de satisfacer el requisito del formulario, bloqueando efectivamente el envío del formulario por completo.
Accesibilidad: Los lectores de pantalla anuncian los elementos <select> junto con sus opciones disponibles. Un desplegable obligatorio vacío crea una experiencia confusa para los usuarios de tecnologías de asistencia.
Validación de formularios: Los navegadores usan el primer <option> con un value vacío como placeholder. La validación de restricciones integrada para selects obligatorios se basa en comprobar si el valor de la opción seleccionada es una cadena no vacía. Sin ninguna opción, este comportamiento de validación queda indefinido.

Cómo funciona el patrón placeholder

La especificación HTML define un comportamiento específico para los desplegables obligatorios de selección única: el primer elemento <option>, si tiene un atributo value vacío, actúa como placeholder. Cuando el formulario se envía con este placeholder aún seleccionado, la validación del navegador rechazará el envío porque el valor está vacío. Este es el patrón estándar para incitar a los usuarios a hacer una elección deliberada.

Ejemplos

❌ Inválido: `<select>` obligatorio sin opciones

<label for="color">Elige un color:</label>
<select id="color" name="color" required>
</select>

Esto desencadena el error de validación porque no hay elementos <option> dentro del <select> obligatorio.

❌ Inválido: `<select>` obligatorio con solo un grupo pero sin opciones

<label for="color">Elige un color:</label>
<select id="color" name="color" required>
  <optgroup label="Colores">
  </optgroup>
</select>

Un <optgroup> vacío no satisface el requisito. El <select> aún necesita al menos un <option>.

✅ Válido: `<select>` obligatorio con placeholder y opciones

<label for="color">Elige un color:</label>
<select id="color" name="color" required>
  <option value="">--Selecciona un color--</option>
  <option value="red">Rojo</option>
  <option value="green">Verde</option>
  <option value="blue">Azul</option>
</select>

El primer <option> tiene un value vacío, por lo que sirve como placeholder. El navegador requerirá que el usuario elija una de las otras opciones antes de enviar el formulario.

✅ Válido: `<select>` obligatorio con `multiple` (la regla no aplica)

<label for="colors">Elige uno o más colores:</label>
<select id="colors" name="colors" required multiple>
</select>

Esto no desencadena el error porque el atributo multiple está presente, lo que exime al elemento de esta regla particular. Sin embargo, un multi-select vacío sigue siendo una UX pobre y generalmente debería evitarse.

✅ Válido: `<select>` obligatorio con `size` mayor que 1 (la regla no aplica)

<label for="colors">Elige un color:</label>
<select id="colors" name="colors" required size="4">
</select>

Cuando size es mayor que 1, el elemento se renderiza como una lista y la regla ya no aplica. De nuevo, aunque técnicamente válido, una lista vacía no es útil en la práctica.

✅ Válido: `<select>` obligatorio con opciones agrupadas

<label for="vehicle">Elige un vehículo:</label>
<select id="vehicle" name="vehicle" required>
  <option value="">--Selecciona un vehículo--</option>
  <optgroup label="Coches">
    <option value="sedan">Sedán</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Camiones">
    <option value="pickup">Pickup</option>
    <option value="semi">Semi</option>
  </optgroup>
</select>

Las opciones dentro de elementos <optgroup> cuentan como opciones hijo del <select>, por lo que esto es completamente válido.