Verificação HTML: O elemento "label" pode conter no máximo um descendente "button", "input", "meter", "output", "progress", "select", ou "textarea".

Sobre este problema HTML

A especificação HTML define o elemento <label> como uma legenda para um único controlo de formulário. Quando você coloca vários elementos rotuláveis dentro de um <label>, o navegador não consegue determinar com qual controlo o texto do label está associado. Isto cria ambiguidade para tecnologias assistivas como leitores de ecrã, que dependem de uma relação clara um-para-um entre labels e os seus controlos para anunciar campos de formulário corretamente. Também quebra o comportamento de clique-para-focar — clicar no texto do label deveria focar ou ativar o controlo associado, mas com vários controlos aninhados dentro, o alvo pretendido não é claro.

Os elementos rotuláveis são especificamente: <button>, <input> (exceto type="hidden"), <meter>, <output>, <progress>, <select>, e <textarea>. Se qualquer combinação de dois ou mais destes aparecer como descendentes de um único <label>, o validador irá sinalizar o erro.

Um cenário comum que desencadeia isto é quando os programadores tentam agrupar campos relacionados — como nome próprio e apelido — dentro de um label, ou quando aninham um botão junto com um input dentro de um label para conveniência de estilo.

Como corrigir

Use um <label> por controlo. Envolva cada elemento rotulável no seu próprio <label>, ou use o atributo for para associar um <label> com o id de um controlo específico.
Use um elemento contentor para agrupamento. Se precisar de agrupar visualmente controlos relacionados, use um <fieldset> com uma <legend> em vez de um único <label>.

Exemplos

❌ Incorreto: Dois inputs dentro de um label

<label>
  Name
  <input type="text" name="first" placeholder="First">
  <input type="text" name="last" placeholder="Last">
</label>

Isto é inválido porque o <label> contém dois descendentes <input>.

✅ Corrigido: Labels separados para cada input

<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

✅ Corrigido: Usando um fieldset para agrupar controlos relacionados

<fieldset>
  <legend>Name</legend>
  <label>
    First
    <input type="text" name="first">
  </label>
  <label>
    Last
    <input type="text" name="last">
  </label>
</fieldset>

❌ Incorreto: Um select e um button dentro de um label

<label>
  Pick your age
  <select name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
  <button type="button">Help</button>
</label>

✅ Corrigido: Botão movido para fora do label

<label>
  Pick your age
  <select name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
</label>
<button type="button">Help</button>

✅ Correto: Um controlo dentro de um label (associação implícita)

<label>
  Age
  <select id="age" name="age">
    <option>Young</option>
    <option>Old</option>
  </select>
</label>

Isto é válido porque o <label> contém exatamente um descendente rotulável — o elemento <select>. A associação entre o texto do label e o controlo é implícita e clara tanto para navegadores como para tecnologias assistivas.