Valor inválido “none” para o atributo “autocomplete” no elemento “input”: A string “none” não é um nome de campo de preenchimento automático válido.

O atributo autocomplete diz ao navegador como lidar com o preenchimento automático de um campo de formulário. A especificação HTML define um conjunto estrito de valores permitidos: as palavras-chave on e off, e uma coleção de nomes de campos de preenchimento automático como name, email, username, new-password, street-address, e muitos outros. O valor "none" não faz parte desta especificação, mesmo que possa parecer uma escolha lógica para “sem preenchimento automático.”

Esta confusão provavelmente surge porque algumas APIs e frameworks não-web usam "none" como palavra-chave para desativar funcionalidades. No HTML, no entanto, a palavra-chave correta para desativar o preenchimento automático é "off". Usar um valor inválido como "none" leva a um comportamento indefinido do navegador — alguns navegadores podem ignorá-lo completamente e preencher automaticamente mesmo assim, enquanto outros podem tratá-lo como equivalente a "on". Esta inconsistência pode causar experiências de utilizador inesperadas e potenciais preocupações de segurança, especialmente para campos sensíveis como palavras-passe ou números de cartão de crédito.

Além da conformidade com os padrões, usar valores autocomplete válidos melhora a acessibilidade. Tecnologias assistivas e gestores de palavras-passe dependem de nomes de campos de preenchimento automático reconhecidos para ajudar os utilizadores a preencher formulários eficientemente. Quando um valor válido e descritivo como "username" ou "email" é fornecido, os navegadores e ferramentas assistivas podem oferecer sugestões mais precisas.

Como corrigir

Substitua "none" pelo valor válido apropriado:

• Use "off" se quiser desativar o preenchimento automático para o campo.
• Use "on" se quiser que o navegador decida como preencher automaticamente o campo.
• Use um nome de campo de preenchimento automático específico se quiser dar uma pista sobre o tipo de dados esperado.

Nomes comuns de campos de preenchimento automático incluem: name, given-name, family-name, email, username, new-password, current-password, tel, street-address, postal-code, country, cc-number, cc-exp, e cc-name. Também pode combinar tokens, como "shipping postal-code" ou "billing cc-number", para fornecer contexto adicional através de tokens de secção e sugestão.

Nota: Mesmo com autocomplete="off", alguns navegadores podem ainda preencher automaticamente certos campos (particularmente credenciais de login) por razões de segurança ou usabilidade. Este é um comportamento específico do navegador e não algo que a especificação HTML possa sobrepor.

Exemplos

Incorreto: usar "none" para desativar o preenchimento automático

<form>
  <label for="user">Nome de utilizador</label>
  <input type="text" id="user" name="username" autocomplete="none">
</form>

Correto: usar "off" para desativar o preenchimento automático

<form>
  <label for="user">Nome de utilizador</label>
  <input type="text" id="user" name="username" autocomplete="off">
</form>

Correto: usar um nome de campo de preenchimento automático específico

Quando sabe que tipo de dados um campo recolhe, fornecer um nome de campo de preenchimento automático descritivo é frequentemente melhor do que usar "on" ou "off". Isto ajuda os navegadores a oferecer sugestões precisas:

<form>
  <label for="user">Nome de utilizador</label>
  <input type="text" id="user" name="username" autocomplete="username">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="pwd">Nova palavra-passe</label>
  <input type="password" id="pwd" name="password" autocomplete="new-password">
</form>

Correto: usar tokens de secção e sugestão

Pode prefixar um nome de campo de preenchimento automático com um nome de secção ou uma sugestão de shipping/billing para distinguir entre vários endereços no mesmo formulário:

<form>
  <label for="ship-zip">Código postal de envio</label>
  <input type="text" id="ship-zip" name="ship_zip" autocomplete="shipping postal-code">

  <label for="bill-zip">Código postal de faturação</label>
  <input type="text" id="bill-zip" name="bill_zip" autocomplete="billing postal-code">
</form>

Saiba mais:

MDN Reference

MDN: autocomplete

→