Use-Cases of this tutorial
- Know how to prevent browser from autofilling the password field for some forms.
- Know about autocomplete=new-password attribute that can be used on password input fields.
A password field can be prevented to get autofilled by the browser by using the HTML autocomplete=new-password attribute.
Problem : Autofilling Password Field is Sometimes Not Required
It is very common to save login details for a website in the browser. This results in the browser autofilling the login username and password every time we try to login to the website.
However in some cases we would not want the browser to autofill the password field :
- A user has saved login details in the browser, and another user tries to sign up using the "Sign Up" form (password field may be autofilled with the password of the first user)
- The user is trying to change his password using the "Update Password" form (new password field may get autofilled with the old password)
Solution : Using autocomplete=new-password
To prevent such situations where we would not like the browser to autofill the password field in a form, the autocomplete attribute can be used in <input type="password" /> element. The autocomplete attribute should be set to the value new-password.
<form>
<input type="text" name="username" />
<input type="password" name="password" autocomplete="new-password" />
<button>Signup</button>
</form>
Firefox Can Suggest Secure Passwords for autocomplete=new-password Field
From Firefox 70, a right click on a password element having autocomplete=new-password will give the user an option to fill the password field with a securely generated password. This can be useful for users looking to set a strong password.