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 -->

Answer 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

Answer 2

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.