Autocomplete password against email (in browser password manager) instead of recovery code

Question

My "forgot my password" webpage emails a code to the user. The form they enter this on looks like:

<input class="form-control" type="text" name="code" id="code">
<input type="hidden" name="email" value="$email" autocomplete="email">
<input class="form-control" type="password" name="password" id="password" autocomplete="new-password">
<input data-parsley-equalto="#password" name="confirm-password" class="form-control" type="password" id="confirm_password" autocomplete="new-password">

The issue is that when the user enters the code and the new password the browser (in this case Chrome) will create a new Saved Password entry against the recovery code, instead of the email address (which worked correctly on the account creation page).

The hidden email address field was supposed to "trick" the browser to save the new password against the email address, but Chrome ignores it and continues to create a new Saved Password entry against the (useless) recovery code.

What do I need to change to convince browsers to save the new password against the email address?

Answer 1

The solution is to mark the recovery code field as a one-time-password:

<input class="form-control" type="text" name="code" id="code" autocomplete="one-time-code">

This let's the hidden email address get selected as the account for the changed password and it updates correctly in the Chrome password manager.