Validación HTML: Valor incorrecto "X" para el atributo "for" en el elemento "label": Un ID no debe contener espacios en blanco.

Acerca de este problema HTML

El elemento <label> representa un título para un control de formulario. Cuando usas el atributo for, su valor debe coincidir con el id del control de formulario que etiqueta. Según la especificación HTML, el valor de un atributo id no debe contener ningún carácter de espacio en blanco — esto incluye espacios, tabuladores, saltos de línea, retornos de carro y saltos de página. Como for debe referenciar un ID válido, la misma restricción se aplica a su valor.

Este error suele ocurrir cuando un desarrollador usa un nombre separado por espacios (como "user name" o "first name") en lugar de un token continuo único. Los navegadores pueden fallar al establecer la asociación programática entre la etiqueta y su control de formulario cuando el valor de for contiene espacios en blanco. Esto impacta directamente en la accesibilidad: los lectores de pantalla dependen de esta asociación para anunciar el texto de la etiqueta cuando un usuario enfoca en la entrada. También rompe el comportamiento de hacer clic para enfocar donde hacer clic en una etiqueta mueve el foco a su control asociado.

Para solucionar este problema, reemplaza cualquier espacio en blanco en el valor del atributo for con un carácter válido como un guión (-), guión bajo (_), o camelCase. Asegúrate de que el id en el control de formulario correspondiente coincida exactamente.

Ejemplos

Incorrecto — espacios en blanco en el atributo `for`

<form>
  <label for="user name">Name</label>
  <input type="text" id="user name">
</form>

El valor "user name" contiene un espacio, lo que lo convierte en una referencia de ID inválida. El validador reportará: Valor incorrecto “user name” para el atributo “for” en el elemento “label”: Un ID no debe contener espacios en blanco.

Correcto — usando un guión bajo en lugar de un espacio

<form>
  <label for="user_name">Name</label>
  <input type="text" id="user_name">
</form>

Correcto — usando un guión en lugar de un espacio

<form>
  <label for="user-name">Name</label>
  <input type="text" id="user-name">
</form>

Correcto — usando camelCase

<form>
  <label for="userName">Name</label>
  <input type="text" id="userName">
</form>

Incorrecto — espacios en blanco al principio o al final

Los espacios en blanco no tienen que estar en el medio del valor para activar este error. Los espacios al principio o al final también hacen que el ID sea inválido:

<form>
  <label for=" email">Email</label>
  <input type="text" id=" email">
</form>

Esto puede ser fácil de pasar por alto cuando los valores se generan dinámicamente o se copian de otra fuente. Recorta el valor para solucionarlo:

<form>
  <label for="email">Email</label>
  <input type="text" id="email">
</form>

Alternativa — envolviendo la entrada dentro de la etiqueta

Si envuelves el control de formulario dentro del elemento <label>, no necesitas el atributo for en absoluto. La asociación es implícita:

<form>
  <label>
    Name
    <input type="text">
  </label>
</form>

Este enfoque evita por completo las posibles discordancias de ID, aunque el emparejamiento explícito for/id a menudo se prefiere por flexibilidad en el diseño y estilo.