Search code examples
htmlgoogle-chromeinputautofill

Multiple email input get populated by autofill with different name/id/placeholder

In a form with multiple email-inputs with different name, id & placeholder, chrome autofills always 9 fields at a time. Of course, I could disable autofill (with autocomplete="new-password"), which solves the problem.

But what can I do, that the user can choose multiple different emails from his autofill?

<form action="">
    <input type="email" name="email1" id="mail-1" placeholder="Mail of Person #1">
    <input type="email" name="email2" id="mail-2" placeholder="Mail of Person #2">
    <input type="email" name="email3" id="mail-3" placeholder="Mail of Person #3">
    <input type="email" name="email4" id="mail-4" placeholder="Mail of Person #4">
    <input type="email" name="email5" id="mail-5" placeholder="Mail of Person #5">
    <input type="email" name="email6" id="mail-6" placeholder="Mail of Person #6">
    <input type="email" name="email7" id="mail-7" placeholder="Mail of Person #7">
    <input type="email" name="email8" id="mail-8" placeholder="Mail of Person #8">
    <input type="email" name="email9" id="mail-9" placeholder="Mail of Person #9">
    <input type="email" name="email10" id="mail-10" placeholder="Mail of Person #10">
</form>

Demo: https://jsfiddle.net/xhtv781s/ Demo with array naming: https://jsfiddle.net/1kuvfasq/

screencast

Tested on macOS 10.15.7 / Chrome 92.

Solution

  • I have edited your HTML code to fix this. Allow me to explain.

    <form action="">
    <input autocomplete="nofill" type="email" name="email1" id="mail-1" placeholder="Mail of Person #1">
    <input autocomplete="nofill" type="email" name="email2" id="mail-2" placeholder="Mail of Person #2">
    <input autocomplete="nofill" type="email" name="email3" id="mail-3" placeholder="Mail of Person #3">
    <input autocomplete="nofill" type="email" name="email4" id="mail-4" placeholder="Mail of Person #4">
    <input autocomplete="nofill" type="email" name="email5" id="mail-5" placeholder="Mail of Person #5">
    <input autocomplete="nofill" type="email" name="email6" id="mail-6" placeholder="Mail of Person #6">
    <input autocomplete="nofill" type="email" name="email7" id="mail-7" placeholder="Mail of Person #7">
    <input autocomplete="nofill" type="email" name="email8" id="mail-8" placeholder="Mail of Person #8">
    <input autocomplete="nofill" type="email" name="email9" id="mail-9" placeholder="Mail of Person #9">
    <input autocomplete="nofill" type="email" name="email10" id="mail-10" placeholder="Mail of Person #10">
</form>

    With google chrome, all you had to do back then was add autocomplete=false to the tag and it would not add autocorrect to sections of your form. The current fix for this is to put autocomplete="nofill" to each of your tags.

    Now you can change the nofill to whatever you want because that confuses google chrome and disables autocomplete on the you place that attribute in.

    As far as I know to, This is a bug that was reported a long time ago.