Verificação HTML: O atributo "maxlength" só é permitido quando o tipo de input é "email", "password", "search", "tel", "text", ou "url".

Sobre este problema HTML

O atributo maxlength fornece validação client-side incorporada que limita o número de caracteres que um utilizador pode digitar num campo. Os navegadores aplicam isto impedindo mais input assim que o limite é atingido. No entanto, este comportamento só faz sentido para tipos de input que aceitam strings de texto arbitrárias. Tipos de input como number, date, range, e checkbox têm os seus próprios formatos de valor e restrições — o valor de um input de número é controlado por min, max, e step, não pela contagem de caracteres.

Quando você coloca maxlength num tipo de input não suportado, os navegadores irão ignorar o atributo. Isto significa que não fornece validação real enquanto dá uma falsa sensação de segurança. Também produz HTML inválido, que pode causar problemas com tecnologias assistivas que podem tentar interpretar o atributo e transmitir informação incorreta aos utilizadores. Manter a sua marcação válida garante comportamento previsível entre navegadores e uma melhor experiência para todos os utilizadores.

Como resolver

Remova maxlength de qualquer <input> cujo type não seja email, password, search, tel, text, ou url.
Use os atributos de restrição corretos para o tipo de input em questão. Para inputs number, use min e max. Para inputs date, use min e max com strings de data.
Se você realmente precisar de validação de comprimento de caracteres, considere se um tipo de input baseado em texto é mais apropriado para o seu caso de uso, ou implemente a restrição em JavaScript.

Exemplos

❌ Inválido: `maxlength` num input de número

<label for="quantity">Quantidade</label>
<input type="number" id="quantity" name="quantity" maxlength="3">

O tipo number não suporta maxlength. Os navegadores irão ignorá-lo, e o HTML é inválido.

✅ Corrigido: usando `min` e `max` para um input de número

<label for="quantity">Quantidade</label>
<input type="number" id="quantity" name="quantity" min="0" max="999">

Se o objetivo era limitar o valor a três dígitos, min e max são as restrições corretas.

❌ Inválido: `maxlength` num input de data

<label for="start-date">Data de início</label>
<input type="date" id="start-date" name="start-date" maxlength="10">

Inputs de data têm um seletor de data fornecido pelo navegador, e os seus valores estão sempre no formato YYYY-MM-DD. O atributo maxlength não tem efeito aqui.

✅ Corrigido: usando `min` e `max` para um input de data

<label for="start-date">Data de início</label>
<input type="date" id="start-date" name="start-date" min="2020-01-01" max="2030-12-31">

❌ Inválido: `maxlength` numa checkbox

<label>
  <input type="checkbox" name="agree" maxlength="1"> Concordo
</label>

Uma checkbox é um botão booleano — o comprimento de caracteres não faz sentido aqui.

✅ Corrigido: removendo o atributo inválido

<label>
  <input type="checkbox" name="agree"> Concordo
</label>

✅ Válido: `maxlength` em tipos baseados em texto suportados

<label for="username">Nome de utilizador</label>
<input type="text" id="username" name="username" maxlength="30">

<label for="user-email">Email</label>
<input type="email" id="user-email" name="email" maxlength="254">

<label for="user-phone">Telefone</label>
<input type="tel" id="user-phone" name="phone" maxlength="15">

<label for="site-url">Website</label>
<input type="url" id="site-url" name="website" maxlength="2048">

<label for="user-pass">Palavra-passe</label>
<input type="password" id="user-pass" name="password" maxlength="128">

<label for="query">Pesquisar</label>
<input type="search" id="query" name="q" maxlength="100">

Todos estes seis tipos de input suportam maxlength porque aceitam texto livre onde limitar a contagem de caracteres faz sentido.