Login form changed, username to email, autocomplete keeps entering in saved email

Question

This has been bothering me for a few weeks now.

I have a login form that used to require username + password:

<form role="form" method="post" action="/login" class="form-signin">
    <div class="form-group">
        <label for="username">Username</label>
        <input id="username" name="username" type="text" placeholder="ex: AD\jdoe" required="required" autofocus="autofocus" class="form-control"/>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" required="required" class="form-control"/>
    </div>
</form>

I changed it to use the user's email instead due to reasons:

<form id="form" role="form" method="post" action="/login" class="form-signin">
    <div class="form-group">
        <label for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="ex: name@website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" required="required" class="form-control"/>
    </div>
</form>

Much to my surprise, Chrome was still auto-filling out the email field with the previously saved credentials. I tried a variety of permutations on the email field's attributes to no avail (also tried renaming the password field as well just in case, and that too still gets auto-filled). Firefox has the same behavior as well.

I also tried renaming the form itself, and adding a second form just to test wherein the browser filled in both sets of inputs.

Finally, exasperated, I came up with this workaround:

<form id="form" role="form" method="post" action="/login" class="form-signin">
    <div class="form-group">
        <label for="email">Email</label>
        <input id="email" name="email" type="email" placeholder="ex: name@website.com" required="required" autofocus="autofocus" autocomplete="email" class="form-control required"/>
        <!-- Workaround for inability to clear the autocomplete functionality of a previously named field-->
        <input id="username" type="text" name="username" class="hidden"/>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input id="password" name="password" type="password" required="required" class="form-control"/>
    </div>
</form>

The downside is that it won't save the user's email if they have previously saved credentials, and it continues to auto-fill the password (and the username too).

Of course, I can add some error to trigger to validate the field is an email and whatnot, but I'm more curious as to why this behavior is happening. It seems that short of removing the saved credentials in my own browser, I have no way to reset the auto-complete data for my users to prevent it from erroneously filling in the username into the email field.

What's kind of funny as well, since I set the new input to be of type email, it triggers the validation of the field and throws the browser's validation error saying the username is not a valid email (as expected).

Answer 1

I referenced this Stack Overflow question, which says:

It does not care what the field is called - just assumes the field before password is going to be your username.

This was what I was guessing to be the problem. Because your field is named password, it assumes that whatever comes before it is also related to login credentials (which is 100% time how it goes).

If you never want autocomplete on your login, that's the easier solution: simply disable autocomplete on the fields by using autocomplete="off" as an attribute on the fields. However, if you want to have the fields use autocomplete, just not the old data, that will prove to be a bit more difficult, and I don't know the full solution to this. The above article only makes mention of fully disabling autocomplete.

What might fix this (allowing autocomplete but not the old data) would be to use different input field names. Granted, I haven't tested this, but if you call your password field password2 and your username field username2 or something similar, and do not have a password input field, Chrome might detect it as being a different set of fields, and make its own, new association. Again though, I can't promise that this will work for you.

Answer 2

Not really a "fix" per se since it doesn't really handle it transparently as I was hoping, but, I opted to simply remove the workaround field and let my users deal with having their browser through a validation error when submitting the form.

Since the new field has type="email", when they try to submit the form it will validate the previously saved username as an invalid email and tell the user of such. The user will then change it to their email and hit submit again, at which point the browser will prompt them with the save login credentials message and all will be happy hence forth.

Not as clean as I'd have liked it, but it works and it'll be a one-time thing for users who had previously saved their username.