Skip to main content
Validação HTML

Valor inválido “” para o atributo “autocomplete” no elemento “input”: Não pode estar vazio.

Sobre este problema HTML

O atributo autocomplete indica ao navegador se e como deve preencher automaticamente um campo de formulário. O padrão HTML living define um conjunto específico de valores permitidos — uma string vazia não está entre eles. Quando o atributo está presente mas vazio, o navegador recebe instruções ambíguas: você declarou explicitamente o atributo, sinalizando intenção, mas não forneceu nenhuma diretiva real. Diferentes navegadores podem interpretar isto de forma inconsistente, alguns tratando-o como on, outros ignorando-o, e outros recorrendo ao comportamento padrão.

Isto importa por várias razões:

  • Conformidade com padrões: A especificação WHATWG HTML requer que autocomplete contenha as palavras-chave on ou off, ou um ou mais tokens de detalhe de preenchimento automático válidos. Uma string vazia não satisfaz nenhuma destas condições.
  • Acessibilidade: O preenchimento automático ajuda utilizadores com deficiências motoras ou cognitivas a completar formulários mais rapidamente e com precisão. Um valor autocomplete ambíguo pode interferir com tecnologias assistivas que dependem destas dicas.
  • Experiência do utilizador: Tokens de preenchimento automático específicos como email, tel, street-address, e current-password permitem aos navegadores e gestores de palavras-passe sugerir os dados corretos para o campo correto. Usá-los corretamente torna os formulários mais rápidos e fáceis de completar.

Este problema surge comumente quando uma framework ou motor de templates produz autocomplete="" como padrão, ou quando um programador pretende desativar o preenchimento automático mas deixa o valor em branco em vez de usar off.

Como corrigir

Escolha uma destas abordagens dependendo da sua intenção:

  1. Remova o atributo se quiser o comportamento padrão do navegador (o navegador decide se deve preencher automaticamente).
  2. Use on para permitir explicitamente o preenchimento automático.
  3. Use off para desencorajar explicitamente o preenchimento automático (nota: os navegadores podem ainda assim preencher automaticamente campos de login).
  4. Use um token de preenchimento automático específico para dizer ao navegador exatamente que tipo de dados o campo espera. Esta é a opção mais útil para os utilizadores.

Tokens de preenchimento automático comuns incluem: name, given-name, family-name, email, username, new-password, current-password, tel, street-address, postal-code, country, e cc-number. Pode encontrar a lista completa na especificação de preenchimento automático WHATWG.

Exemplos

Incorreto: valor autocomplete vazio

<input type="text" name="username" autocomplete="">

Isto desencadeia o erro de validação porque o atributo está presente mas não contém nenhum token válido.

Correto: remover o atributo completamente

Se não tem nenhuma preferência específica de preenchimento automático, simplesmente omita o atributo:

<input type="text" name="username">

Correto: usar on ou off

Ativar ou desativar explicitamente o preenchimento automático:

<input type="text" name="username" autocomplete="on">
<input type="text" name="search-query" autocomplete="off">

Correto: usar tokens de preenchimento automático específicos

Tokens específicos dão aos navegadores as melhores dicas para preencher os dados corretos. Esta é a abordagem recomendada para formulários que recolhem informações pessoais:

<form>
  <label for="name">Nome completo</label>
  <input type="text" id="name" name="name" autocomplete="name">

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

  <label for="phone">Telefone</label>
  <input type="tel" id="phone" name="phone" autocomplete="tel">

  <label for="pwd">Palavra-passe</label>
  <input type="password" id="pwd" name="pwd" autocomplete="current-password">

  <button type="submit">Iniciar sessão</button>
</form>

Usar tokens precisos como current-password e email ajuda os gestores de palavras-passe e teclados móveis a fornecer as sugestões mais relevantes, melhorando a experiência para todos os utilizadores.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.