Firefox isn't choosing username/email field when remembering form inputs

I have a signup form using the following code:

<form accept-charset="UTF-8" action="/sign-up" class="simple_form customer" id="customer_new" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="KmdKII+6lUG4m2VzCwvSdIURwWOmZmsAsCrPt9cExJA=" /></div>
    <fieldset>
      <div class="grouped">
        <div class="input string required"><label class="string required" for="customer_fname"> First name</label><input class="string required half" id="customer_fname" name="customer[fname]" size="50" type="text" /></div>

        <div class="input string required"><label class="string required" for="customer_lname"> Last name</label><input class="string required half" id="customer_lname" name="customer[lname]" size="50" type="text" /></div>
      </div>
      <div class="grouped">
        <div class="input string email required"><label class="email required" for="customer_email"> Email</label><input class="string email required half" id="customer_email" name="customer[email]" size="50" type="text" /></div>
        <div class="input string required"><label class="string required" for="customer_zip"> Zip code</label><input class="string required" id="customer_zip" maxlength="5" name="customer[zip]" size="5" type="text" /></div>
      </div>

      <div class="grouped">
        <div class="input st开发者_StackOverflowring password required"><label class="password required" for="customer_password"> Password</label><input class="string password required half" id="customer_password" name="customer[password]" size="50" type="password" /></div>
        <div class="input string password optional"><label class="password optional" for="customer_password_confirmation"> Password confirmation</label><input class="string password optional half" id="customer_password_confirmation" name="customer[password_confirmation]" size="50" type="password" /></div>
      </div>
    </fieldset>
    <input id="sign-me-up" name="commit" type="submit" value="Sign me up for doggyloot!" />
</form>

When I submit the form, Firefox asks me Do you want to remember the password for "90210" on http://localhost:3000? if I type 90210 into the zip code field. Right now, the zip code field is the one right before the password field in the HTML in the source. If I switch it around so that email field is right before password, it correct asks me if I want to remember the password for example@example.com.

But, is there a way to tell Firefox (or any browser) which field is the username/email field even if it doesn't come immediately before the password field?

Try reading this: Firefox form auto-completion documentation

What I understood from this documentation is that Firefox knows it's a username/password based on the "name" attribute of the input tag so try working with that.

I hope that helps, sorry I couldn't give you a complete answer