Chrome remembers postcode rather than Email/username

Question

I am working on an MVC5 Web Application , I have a simple registration form containing Email , postcode and password. But when I register the chrome remembers the postcode and password rather than email and password; and next time when I try to enter email the postcodes appear as suggestions.

My markup for the form is as under:

I have edited the question and pasted the whole form. kindly suggest me what to do other than moving email and passwords up or down.

<div class="wrapper">   

<div class="closeBetaWrapp">
    <div class="simplePopup">               

        <div class="loginWrapp signupWrapp">
            <div class="iconCont"><img src="images/orchaIcon.png" alt="Orcha"></div>

            <form action="">
                <div class="formrow ">

                    <div class="leftCol">
                        <label for="Email">Email</label>
                        <input class="formField" type="email" name="Email" id="Email" placeholder="Enter your email address here" />
                    </div>

                    <div class="leftCol">
                        <label for="Pcode">Postcode</label>
                        <input class="formField" type="tel" name="Pcode" id="Pcode" placeholder="Enter postcode here" />
                    </div>  

                    <div class="leftCol">
                        <label>Year of Birth</label>
                        <select id="" class="dropdown">
                            <option>Choose your year of birth</option>
                            <option>1980</option>
                            <option>1981</option>
                            <option>1982</option>
                            <option>1983</option>
                            <option>1984</option>
                            <option>1985</option>
                            <option>1986</option>
                            <option>1987</option>
                            <option>1988</option>
                            <option>1989</option>
                            <option>1990</option>
                            <option>1991</option>
                            <option>1992</option>
                            <option>1993</option>
                            <option>1994</option>
                            <option>1995</option>
                        </select>
                    </div>  

                    <div class="leftCol">
                        <label>Gender</label>
                        <select id="" class="dropdown">
                            <option>Choose your year of birth</option>
                            <option>Female</option>
                            <option>Male</option>
                        </select>
                    </div>  

                    <div class="leftCol">
                        <label for="Password">Password</label>
                        <input class="formField" type="password" name="Password" id="Password" placeholder="Enter your password here" />
                    </div>

                    <div class="rightCol">
                        <label for="CPassword">Confirm Password</label>
                        <input class="formField" type="password" name="CPassword" id="CPassword" placeholder="Enter password again" />
                    </div>  

                </div><!-- formrow -->
                <div class="formrow">
                    <div class="rightCol btnCol">
                        <input class="moreBtn" type="submit" value="Signup" />
                        <input class="moreBtn cnclBtn" type="reset" value="Cancel" />
                    </div>  

                </div><!-- formrow -->
            </form>
        </div>



    </div>
</div><!-- closeBetaWrapp -->

Can you please post the full form code? from `
` to `
`. Also where is your password field, submit button? I tried after adding a form element and a submit button. it worked fine. — Sourav Ghosh, Dec 30 '15 at 08:31

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

Browsers detect passwords by form.elements[n].type == "password" and iterating through all the document. Then it detects the username field by searching backwards through form elements for the text field immediately before the password field.

So, In your case, It thinks your postcode as your username field and remembers this.

So, solution is to move the postcode field above the email field.

If even after moving, it doesn't work, delete previously saved postcode-password value from 'saved passwords' in chrome settings. Also delete any previously saved values by using down arrow key to select the suggestion and pressing shift + delete.

I got the information about how browsers detect username-password field here & here

edited May 23 '17 at 12:33

Community

1
1

answered Dec 30 '15 at 08:42

Sourav Ghosh

1,964
4
33
43

I can't do this because the design is such that password is the last field and the email is the first , in between there are a couple of drop downs.. – muhammad waqas Dec 30 '15 at 09:09
Then I think there is no way because that's the way browsers detect username-password combination. Try your luck by changing email field type to `type="username"`. If you are lucky chrome may detect it as username. Otherwise you are out of luck. – Sourav Ghosh Dec 30 '15 at 09:16
Changing `type` won't work. I just tested. Only way to do it is to move email field below postcode field. – Sourav Ghosh Dec 30 '15 at 09:44

score 0 · Answer 2 · answered Dec 30 '15 at 08:47

You can use the autocomplete attribute to tell the browser what the field contains. For example:

<input class="formField" autocomplete="postal-code" type="text" name="PostCode" id="PostCode" placeholder="Enter your postcode here" />

See https://html.spec.whatwg.org/multipage/forms.html#autofill for more information.

Chrome remembers postcode rather than Email/username

2 Answers2