Como Bloquear o Autocompletar em Formulários HTML

Ao criar formulários HTML, pode ser necessário desativar a funcionalidade de autocompletar oferecida pelos navegadores. Essa prática é útil para aumentar a privacidade ou evitar preenchimentos automáticos indesejados.

Para desativar o autocompletar em um formulário inteiro, use o atributo autocomplete="off" no elemento <form>. Veja o exemplo:

<form autocomplete="off">
  <label for="username">Usuário:</label>
  <input type="text" id="username" name="username" placeholder="Digite seu usuário">
  
  <label for="password">Senha:</label>
  <input type="password" id="password" name="password" placeholder="Digite sua senha">
  
  <button type="submit">Enviar</button>
</form>

Caso você prefira desativar o autocompletar apenas em campos específicos, o atributo autocomplete="off" pode ser aplicado diretamente nos elementos <input>. Aqui está um exemplo:

<form>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" autocomplete="off" placeholder="Digite seu e-mail">
  
  <label for="phone">Telefone:</label>
  <input type="tel" id="phone" name="phone" autocomplete="off" placeholder="Digite seu telefone">
  
  <button type="submit">Enviar</button>
</form>

Os navegadores podem, em alguns casos, ignorar o atributo autocomplete="off", especialmente em campos de senha. Para contornar essa situação, você pode usar nomes alternativos para os campos ou ocultar um campo fictício com display: none.

Embora bloquear o autocompletar possa melhorar a privacidade, essa prática também pode dificultar a experiência do usuário. Por isso, utilize essa abordagem apenas quando realmente for necessário.

Rolar para cima