Verificação HTML: O atributo "readonly" só é permitido quando o tipo de input é "date", "datetime-local", "email", "month", "number", "password", "search", "tel", "text", "time", "url", ou "week".

Sobre este problema HTML

A especificação HTML restringe o atributo readonly a tipos de input onde o utilizador normalmente digitaria ou selecionaria um valor textual/numérico/de data. A ideia é simples: readonly significa “você pode ver e selecionar este valor, mas não pode editá-lo.” Esse conceito só faz sentido para campos que contêm texto editável ou dados estruturados como datas e números. Para controlos como checkboxes, botões de rádio, seletores de cor, seletores de ficheiros e sliders de intervalo, o modelo de interação é fundamentalmente diferente — não há texto para tornar “apenas leitura.”

A lista completa de tipos de input que suportam readonly é:

text
search
url
tel
email
password
date
month
week
time
datetime-local
number

O atributo readonly não é válido nestes tipos: checkbox, radio, range, color, file, hidden, button, submit, reset, e image.

Porque isto é importante

Conformidade com padrões: Os navegadores não são obrigados a honrar readonly em tipos de input não suportados. Mesmo que um navegador pareça respeitá-lo hoje, esse comportamento não é garantido e pode mudar.

Comportamento de submissão de formulários: Há uma diferença crítica entre readonly e disabled. O valor de um campo readonly é incluído nos dados de submissão do formulário, enquanto o valor de um campo disabled não é. Se trocar readonly por disabled para corrigir este erro, esteja ciente de que o valor do campo não será enviado com o formulário a menos que tome medidas adicionais (como adicionar um input oculto).

Acessibilidade: Leitores de ecrã e tecnologias assistivas dependem de HTML válido para transmitir o estado correto dos controlos de formulário. Usar readonly num tipo não suportado pode enviar sinais confusos sobre a interatividade do controlo.

Como corrigir

Você tem várias opções dependendo do seu objetivo:

Remover readonly se foi adicionado por engano ou não é necessário.
Mudar o tipo de input para um que suporte readonly, se isso se adequar ao seu caso de uso.
Usar disabled em vez disso para impedir interação em inputs não textuais. Lembre-se de que campos disabled são excluídos da submissão do formulário.
Combinar disabled com um input oculto se precisar que o valor seja submetido com o formulário mas quer que o controlo visível seja não interativo.

Exemplos

Inválido: `readonly` numa checkbox

<input type="checkbox" name="agree" readonly>

Inválido: `readonly` num input range

<input type="range" name="volume" min="0" max="100" value="50" readonly>

Inválido: `readonly` num input color

<input type="color" name="theme" value="#ff0000" readonly>

Corrigido: usando `readonly` num tipo de input suportado

<input type="text" name="code" value="ABC-123" readonly>
<input type="email" name="contact" value="user@example.com" readonly>
<input type="date" name="start" value="2024-01-15" readonly>

Corrigido: usando `disabled` para um input não textual

<input type="checkbox" name="agree" checked disabled>

Corrigido: usando `disabled` com um input oculto para preservar a submissão do formulário

Se precisar que o valor seja submetido com o formulário enquanto mantém o controlo visível não interativo, combine um controlo disabled com um input hidden:

<!-- O input oculto garante que o valor é submetido -->

<input type="hidden" name="agree" value="on">
<!-- A checkbox disabled é visível mas não interativa -->

<input type="checkbox" name="agree_display" checked disabled>
<label for="agree_display">Aceito os termos</label>

Corrigido: usando JavaScript para impedir alterações (avançado)

Se realmente precisar de uma checkbox que pareça interativa mas não possa ser alterada, pode usar JavaScript mantendo o HTML válido:

<input type="checkbox" name="agree" checked onclick="return false;">

Note que esta abordagem depende de JavaScript e não funcionará se o scripting estiver desabilitado. Para a maioria dos casos, usar disabled (com ou sem um input oculto complementar) é a solução mais simples e robusta.