Verificação HTML: Valor inválido X para o atributo "checked" no elemento "input".

Sobre este problema HTML

Em HTML, os atributos booleanos funcionam de forma diferente dos atributos normais. Não aceitam true ou false como valores. Em vez disso, a mera presença do atributo representa o estado “true”, e a sua completa ausência representa “false”. De acordo com a especificação WHATWG HTML, um atributo booleano tem exatamente três representações válidas: apenas o nome do atributo (checked), um valor string vazia (checked=""), ou o nome do atributo como o seu próprio valor (checked="checked"). Qualquer outro valor — incluindo os que parecem intuitivos como "true", "false", "yes", ou "no" — é inválido.

Isto é particularmente importante de compreender porque checked="false" não desmarca o input. Uma vez que o atributo ainda está presente, o navegador interpreta-o como marcado. Isto pode levar a um comportamento confuso onde um programador escreve checked="false" esperando que a checkbox esteja desmarcada, mas ela é renderizada como marcada. Para deixar um input desmarcado, deve omitir completamente o atributo checked.

O atributo checked aplica-se a elementos <input> do tipo checkbox e radio. Define o estado marcado inicial quando a página carrega. Note que o JavaScript usa uma convenção diferente — a propriedade DOM checked aceita true ou false como valores booleanos JavaScript — mas isto não se aplica à marcação HTML.

Corrigir este problema garante conformidade com os padrões, evita comportamentos inesperados e melhora a clareza do código. Embora os navegadores sejam tolerantes e normalmente tratem qualquer valor como “checked”, confiar neste comportamento é não-padrão e pode causar confusão para programadores que leem o código.

Exemplos

Inválido: usar um valor string

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

Estes produzem erros de validação porque "true" e "yes" não são valores válidos para atributos booleanos.

Inválido: tentar definir false

<!-- Isto NÃO desmarca o input — continua marcado! -->

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

Apesar do valor "false", a checkbox continuará a ser renderizada como marcada porque o atributo está presente.

Válido: apenas nome do atributo (recomendado)

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

Esta é a forma mais comum e mais limpa.

Válido: valor string vazia

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

Válido: nome do atributo como o seu próprio valor

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

Esta forma é por vezes vista em marcação compatível com XHTML.

Válido: omitir o atributo para deixar desmarcado

<input type="checkbox">

Para representar um estado desmarcado, simplesmente deixe o atributo fora.

Exemplo completo em 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>

Neste exemplo, a checkbox de newsletter e o botão de rádio “Daily” estão pré-selecionados usando o atributo checked válido sem qualquer valor. A checkbox de promoções e o botão de rádio “Weekly” estão desmarcados porque o atributo está ausente.