Password managers look for a number of attributes on forms and input fields: , , and . But most importantly, they will only recognize both the and fields if the field has . autocomplete placeholder type username password password type="password" I was working on the login page of my latest side-project , when I stumbled on a frequent issue with login fields. SPRITSTAT SPRITSTAT is a web service collecting fuel price statistics for locations in Austria and it depends on users creating locations they are interested in (their home address, for instance) and the service will collect the lowest fuel prices on an hourly basis. Over time it is possible to show detailed statistics about fuel prices in the defined locations. Without question, password security is something that cannot be ignored in any current web app and one of the main recommendations is to , which is really only possible if you use a password manager. use separate passwords per website As my experience in this area is limited, I started out with the assumption that password managers would recognize and fields automatically, without me adding any special sauce, by employing heuristics. But as anyone ever trying to implement a login page, it’s not quite as easy as that – none of my password managers recognized the fields at first. username password Now, there are out there that detail how to set up your login form in a way that allows password managers to find and then fill the username and password fields. It isn’t actually that difficult and for simple login forms it burns down to the following rules: quite a few good guides keep it simple and follow best practices like not using dynamic fields/ids/…, not using requests for login GET use standard form practices use the attribute as it is intended placeholder use the autocomplete attribute – for fields and / for fields "username" username "current-password" "new-password" password use the correct type attribute – / for fields and for fields "text" "email" username "password" password It was the last item in combination with a usability fix that I thought to implement that caused me quite some headache. After I had implemented all the recommendations in it still didn’t work on any of my devices, the password managers simply ignored the / fields. the guide username password By now we are used to the little eye icon on password fields that allows us to show or hide the password. This feature has been the best practice for many years now and is definitely one of the most significant usability improvements we have seen with passwords since the dawn of the internet. Usually, the password is hidden by default and only shown if the eye button is pressed. While this works well, there isn’t really a good reason why the password shouldn’t be shown by default, as . Most of the time there isn’t really anyone close by to actually see the password and even if, it is a rare breed who could instantly remember a reasonable password during the few seconds you need to type it in. With this thought, I created the hide/show button and set the attribute of the input field to , which will show the password in plain text. If the button is pressed, the is changed to through that, the password is automatically masked. Only after more time, I’d like to admit, I noticed by accident that the password manager actually allowed me to autofill the / fields when the password is hidden. Jakob Nielsen noted more than a decade ago type "text" type "password" username password While I didn’t really understand the reason for this at first, it actually makes sense if you think about it. No one needs to see the password if it is filled in automatically by the password manager and – I assume – this is the reason why the username and password field is ignored otherwise. I have to admit it pays to read your resources carefully – the following sentence in the guide I only noticed after my ordeal: “steer clear from mimicking a password field with a regular field so that you can do things like showing the last character.” If you enjoyed this story and want to read more from me, you can follow me on / . Also, if you are interested in , it is open source and you can find the code on my . Twitter LinkedIn SPRITSTAT Github Featured image by on . Markus Spiske Unsplash Also Published Here

Ball

Why Password Managers Ignore Input Fields - trial:by:fire

Too Long; Didn't Read

Companies Mentioned

@tgamauf

RELATED STORIES