Se você já criou um formulário na vida, sabe que o Google Chrome costuma ignorar o atributo autocomplete quando o assunto é o campo de senha.

Várias questões no Stackoverflow (essa e essa, por exemplo) e até relatórios de bugs foram escritos nesse sentido. Sem falar que várias gambiarras foram criadas…

O input escondido

A solução já foi criar um campo escondido:

<input style="display:none">
<input type="password" style="display:none">

Um tempo depois o Chrome começou a ignorar campos com display: none e a alternativa foi esconder de outras formas:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

A forma certa

No entanto, existe uma especificação HTML bem clara sobre o uso do atributo autocomplete: veja.

Resumindo, você pode adicionar um valor de grupo (para a seção de campos), como, por exemplo, section-my-form-section. Basta que ele comece com section-.

Logo depois pode vir (separado por espaços) shipping ou billing (util no caso de tipos de endereços distintos). E por fim, a descrição do campo em si:

• name
• honorific-prefix
• given-name
• additional-name
• family-name
• honorific-suffix
• nickname
• username
• new-password
• current-password
• one-time-code
• organization-title
• organization
• street-address
• address-line1
• address-line2
• address-line3
• address-level4
• address-level3
• address-level2
• address-level1
• country
• country-name
• postal-code
• cc-name
• cc-given-name
• cc-additional-name
• cc-family-name
• cc-number
• cc-exp
• cc-exp-month
• cc-exp-year
• cc-csc
• cc-type
• transaction-currency
• transaction-amount
• language
• bday
• bday-day
• bday-month
• bday-year
• sex
• url
• photo

Então, para resolver nosso problema, basta adicionar autocomplete=”new-password” no seu input.

<label>Senha:
    <input name="password" type="password" autocomplete="new-password">
</label>

Conclusão

E é isso aí, pessoal.

Espero ter ajudado e, se você estiver criando um formulário, que tal adicionar todos esses valores para o autocomplete proporcionando um experiência muito melhor para seu usuário?

Alguma dica ou comentário?
Escreva abaixo e faça um DEV feliz.