Validación HTML: Valor incorrecto X para el atributo "checked" en el elemento "input".

Acerca de este problema HTML

En HTML, los atributos booleanos funcionan de manera diferente a los atributos regulares. No toman true o false como valores. En su lugar, la mera presencia del atributo representa el estado “verdadero”, y su completa ausencia representa “falso”. Según la especificación WHATWG HTML, un atributo booleano tiene exactamente tres representaciones válidas: el nombre del atributo solo (checked), un valor de cadena vacía (checked=""), o el nombre del atributo como su propio valor (checked="checked"). Cualquier otro valor — incluyendo los aparentemente intuitivos como "true", "false", "yes", o "no" — es inválido.

Esto es particularmente importante de entender porque checked="false" no desmarca el input. Como el atributo aún está presente, el navegador lo interpreta como marcado. Esto puede llevar a un comportamiento confuso donde un desarrollador escribe checked="false" esperando que la casilla esté desmarcada, pero se renderiza como marcada. Para dejar un input desmarcado, debes omitir el atributo checked completamente.

El atributo checked se aplica a elementos <input> de tipo checkbox y radio. Establece el estado marcado inicial cuando la página se carga. Ten en cuenta que JavaScript usa una convención diferente — la propiedad DOM checked acepta true o false como valores booleanos de JavaScript — pero esto no se aplica al marcado HTML.

Corregir este problema asegura el cumplimiento de estándares, evita comportamientos inesperados y mejora la claridad del código. Aunque los navegadores son permisivos y típicamente tratarán cualquier valor como “marcado”, depender de este comportamiento no es estándar y puede causar confusión para los desarrolladores que lean el código.

Ejemplos

Inválido: usando un valor de cadena

<input type="checkbox" checked="true">
<input type="radio" name="color" value="red" checked="yes">

Estos producen errores de validación porque "true" y "yes" no son valores válidos de atributo booleano.

Inválido: intentando establecer falso

<!-- Esto NO desmarca el input — ¡sigue marcado! -->

<input type="checkbox" checked="false">

A pesar del valor "false", la casilla aún se renderizará como marcada porque el atributo está presente.

Válido: solo el nombre del atributo (recomendado)

<input type="checkbox" checked>
<input type="radio" name="color" value="red" checked>

Esta es la forma más común y limpia.

Válido: valor de cadena vacía

<input type="checkbox" checked="">

Válido: nombre del atributo como su propio valor

<input type="checkbox" checked="checked">

Esta forma a veces se ve en marcado compatible con XHTML.

Válido: omitir el atributo para dejar desmarcado

<input type="checkbox">

Para representar un estado desmarcado, simplemente omite el atributo.

Ejemplo completo en contexto

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Newsletter Preferences</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>Email preferences</legend>
      <label>
        <input type="checkbox" name="newsletter" checked>
        Subscribe to newsletter
      </label>
      <label>
        <input type="checkbox" name="promotions">
        Receive promotional emails
      </label>
    </fieldset>
    <fieldset>
      <legend>Frequency</legend>
      <label>
        <input type="radio" name="frequency" value="daily" checked>
        Daily
      </label>
      <label>
        <input type="radio" name="frequency" value="weekly">
        Weekly
      </label>
    </fieldset>
  </form>
</body>
</html>

En este ejemplo, la casilla del newsletter y el botón de radio “Daily” están preseleccionados usando el atributo checked válido sin ningún valor. La casilla de promociones y el botón de radio “Weekly” están desmarcados porque el atributo está ausente.