Verificação HTML: Um elemento "select" com um atributo "required", e sem um atributo "multiple", e sem um atributo "size" cujo valor seja maior que "1", deve ter um elemento "option" filho.

Sobre este problema HTML

A especificação HTML impõe esta regra porque um elemento <select> obrigatório precisa de opções para que o utilizador possa escolher. Sem qualquer <option> filha, o elemento é semanticamente sem sentido — é um dropdown sem nada para selecionar, mas o formulário exige uma seleção antes da submissão. Isto cria uma situação impossível para o utilizador e um estado ambíguo para o navegador.

Esta regra aplica-se especificamente quando estas três condições são verdadeiras:

O atributo required está presente.
O atributo multiple não está presente.
O atributo size está ausente ou definido como 1 (o valor padrão para um <select> de seleção única).

Quando multiple está definido ou size é maior que 1, o <select> comporta-se de forma diferente (como uma lista em vez de um dropdown), e a especificação relaxa esta restrição. Mas para o dropdown padrão de seleção única, pelo menos uma <option> é obrigatória.

Porque isto é importante

Usabilidade: Um dropdown obrigatório sem opções não dá aos utilizadores forma alguma de satisfazer o requisito do formulário, bloqueando efetivamente a submissão do formulário por completo.
Acessibilidade: Leitores de ecrã anunciam elementos <select> juntamente com as suas opções disponíveis. Um dropdown obrigatório vazio cria uma experiência confusa para utilizadores de tecnologia assistiva.
Validação de formulários: Os navegadores usam a primeira <option> com um value vazio como placeholder. A validação de restrições integrada para selects required baseia-se em verificar se o valor da opção selecionada é uma string não vazia. Sem qualquer opção, este comportamento de validação é indefinido.

Como funciona o padrão de placeholder

A especificação HTML define um comportamento específico para dropdowns obrigatórios de seleção única: o primeiro elemento <option>, se tiver um atributo value vazio, atua como placeholder. Quando o formulário é submetido com este placeholder ainda selecionado, a validação do navegador rejeitará a submissão porque o valor está vazio. Este é o padrão standard para encorajar os utilizadores a fazer uma escolha deliberada.

Exemplos

❌ Inválido: `<select>` obrigatório sem opções

<label for="color">Escolha uma cor:</label>
<select id="color" name="color" required>
</select>

Isto desencadeia o erro de validação porque não há elementos <option> dentro do <select> obrigatório.

❌ Inválido: `<select>` obrigatório com apenas um grupo mas sem opções

<label for="color">Escolha uma cor:</label>
<select id="color" name="color" required>
  <optgroup label="Colors">
  </optgroup>
</select>

Um <optgroup> vazio não satisfaz o requisito. O <select> ainda precisa de pelo menos uma <option>.

✅ Válido: `<select>` obrigatório com placeholder e opções

<label for="color">Escolha uma cor:</label>
<select id="color" name="color" required>
  <option value="">--Selecione uma cor--</option>
  <option value="red">Vermelho</option>
  <option value="green">Verde</option>
  <option value="blue">Azul</option>
</select>

A primeira <option> tem um value vazio, portanto serve como placeholder. O navegador exigirá que o utilizador escolha uma das outras opções antes de submeter o formulário.

✅ Válido: `<select>` obrigatório com `multiple` (regra não se aplica)

<label for="colors">Escolha uma ou mais cores:</label>
<select id="colors" name="colors" required multiple>
</select>

Isto não desencadeia o erro porque o atributo multiple está presente, o que isenta o elemento desta regra particular. No entanto, um multi-select vazio continua a ser uma UX pobre e deve geralmente ser evitado.

✅ Válido: `<select>` obrigatório com `size` maior que 1 (regra não se aplica)

<label for="colors">Escolha uma cor:</label>
<select id="colors" name="colors" required size="4">
</select>

Quando size é maior que 1, o elemento é renderizado como uma lista e a regra já não se aplica. Novamente, embora tecnicamente válido, uma lista vazia não é útil na prática.

✅ Válido: `<select>` obrigatório com opções agrupadas

<label for="vehicle">Escolha um veículo:</label>
<select id="vehicle" name="vehicle" required>
  <option value="">--Selecione um veículo--</option>
  <optgroup label="Carros">
    <option value="sedan">Sedan</option>
    <option value="suv">SUV</option>
  </optgroup>
  <optgroup label="Camiões">
    <option value="pickup">Pickup</option>
    <option value="semi">Semi</option>
  </optgroup>
</select>

Opções dentro de elementos <optgroup> contam como opções filhas do <select>, portanto isto é totalmente válido.