diff --git a/blog_images/padlocks.jpg b/blog_images/padlocks.jpg new file mode 100644 index 000000000..385dc1488 Binary files /dev/null and b/blog_images/padlocks.jpg differ diff --git a/blog_posts/password-autocomplete-suggestion.md b/blog_posts/password-autocomplete-suggestion.md new file mode 100644 index 000000000..c7cca6ad3 --- /dev/null +++ b/blog_posts/password-autocomplete-suggestion.md @@ -0,0 +1,22 @@ +--- +title: "Tip: Adding autocomplete to a password field" +type: tip +tags: webdev +authors: chalarangelo +cover: blog_images/padlocks.jpg +excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields. +--- + +The HTML `autocomplete` attribute provides a wide variety of options for `` fields. One of these is the `new-password` value, which can be used when the user is asked to create a new password (e.g. signup or reset password forms). This value ensures that the browser will not accidentally fill in an existing password, while it also allows the browser to suggest a secure password: + +```html +
+ + + +
+``` + +Additionally, if the form contains a second password field asking the user to retype the newly created password, `autocomplete="new-password"` should be used for both of the password fields. + +**Image credit:** [Alberto Barrera](https://unsplash.com/@abarro?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)