Validación HTML: Elemento "label" con múltiples descendientes etiquetables.

Acerca de este problema HTML

La especificación HTML define un <label> como un título para un control de formulario específico. Cuando usas la técnica de etiquetado implícito — envolviendo un control de formulario dentro de un <label> — el navegador asocia automáticamente el texto de la etiqueta con ese único control. Si múltiples elementos etiquetables aparecen dentro del mismo <label>, la asociación se vuelve ambigua. Los navegadores pueden elegir el primero, el último, o comportarse de manera inconsistente entre diferentes implementaciones.

Los elementos etiquetables incluyen <input> (excepto type="hidden"), <select>, <textarea>, <button>, <meter>, <output>, y <progress>. Cualquier combinación de dos o más de estos dentro de un solo <label> dispara este error de validación.

Esto es importante para la accesibilidad. Los lectores de pantalla dependen de la asociación etiqueta-control para anunciar para qué sirve un campo de formulario. Cuando la asociación es ambigua, la tecnología asistiva puede anunciar la etiqueta incorrecta para un control, o saltarse una completamente, dejando a los usuarios confundidos sobre qué información introducir.

Para solucionar este problema, divide el <label> para que cada uno envuelva exactamente un control de formulario, o usa el atributo for para asociar explícitamente cada etiqueta con un control mediante su id.

Ejemplos

❌ Incorrecto: múltiples elementos etiquetables dentro de una etiqueta

<label>
  Name
  <input type="text" name="name">
  Age
  <input type="number" name="age">
</label>

El único <label> contiene dos elementos <input>, así que el navegador no puede determinar a qué control se refiere el texto de la etiqueta.

✅ Correcto: etiquetas separadas para cada control

<label>
  Name
  <input type="text" name="name">
</label>
<label>
  Age
  <input type="number" name="age">
</label>

❌ Incorrecto: mezclando diferentes elementos etiquetables dentro de una etiqueta

<label>
  Preferences
  <select name="color">
    <option>Red</option>
    <option>Blue</option>
  </select>
  <textarea name="notes"></textarea>
</label>

✅ Correcto: usando atributos `for` explícitos

<label for="color">Favorite color</label>
<select id="color" name="color">
  <option>Red</option>
  <option>Blue</option>
</select>

<label for="notes">Notes</label>
<textarea id="notes" name="notes"></textarea>

✅ Correcto: único descendiente etiquetable con asociación implícita

Este es el patrón que funciona perfectamente — un <label> envolviendo exactamente un control:

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

❌ Incorrecto: los inputs ocultos no cuentan, pero otros inputs sí

Ten en cuenta que <input type="hidden"> no es un elemento etiquetable, así que no disparará este error por sí solo. Sin embargo, combinar un input visible con otro control etiquetable aún causa el problema:

<label>
  Subscribe
  <input type="checkbox" name="subscribe">
  <button type="button">More info</button>
</label>

✅ Correcto: separar cada control en su propia etiqueta

<label>
  Subscribe
  <input type="checkbox" name="subscribe">
</label>
<button type="button">More info</button>

En este caso, el <button> no necesita un <label> en absoluto — su contenido de texto sirve como su nombre accesible. Solo los controles de formulario que necesitan un título visible deberían ser envueltos en un <label>.