How do I ensure Google Password Manager stores the correct field as the username?

Question

Background

I'm a freelance web developer with a client who runs a meal-planning business . I developed a web app for her clients to use to view their meal plans.

The problem

One of my client's new clients sent her a screenshot from their phone showing her at the login page, with Google Password Manager suggesting her username was "165", instead of her actual username (her email address).

My guess at what's happening

When clients are signing up, they need to fill out an onboarding survey (implemented as an HTML form that gets POSTed to the back-end) that asks them various questions. One of the fields at the top asks for the client's email address, and one of the fields at the bottom asks the client to provide a new password. And one of the fields in the middle asks for the client to provide a "weight goal" (the weight they'd like to reach). It seems the client filled out her weight goal as being 165 pounds (in an input field of type "number"). My best guess is that somehow Google's Password Manager ended up thinking that that was her username.

My question

How can I prevent this from happening in the future?

Answer 1

I just used information from Chrome - Would you like to save this password? prompt getting incorrect value

setting autocomplete: 'username' on my email field helped in my case.

Others found putting the username field right before password did the trick, and someone did that by using a hidden field. There doesn't appear to be a conclusive answer yet