iOS Safari autofill not populating all address fields at once

Question

I am currently working on an HTML form that includes fields for user address information such as name, street, zip, and city. The form utilizes W3C autocomplete attributes to facilitate autofill. While testing, I observed that the autofill feature works seamlessly on Android and Windows platforms, but encounters issues on iOS, specifically with Safari.

Here’s a simplified version of my form fields with the autocomplete attributes:

<form action="/submit" method="post">
 <input type="text" name="name" autocomplete="name" placeholder="Name">
 <input type="text" name="street" autocomplete="address-line1" placeholder="Street">
 <input type="text" name="city" autocomplete="address-level2" placeholder="City">
 <input type="text" name="zip" autocomplete="postal-code" placeholder="Zip Code">
 <input type="submit" value="Submit">
</form>

On Safari, when a user selects a contact for autofill, the street and zip fields are not populated simultaneously with the other fields. However, when clicking into the street or zip field individually, Safari proposes the autofill contact again and fills in the data correctly.

I have ensured that all details of the contact information used for autofill are set to "Business" and contains complete and correctly formatted address information. I have also tried using both address-line1 and street-address for the street field, but the issue persists. I have tried on several iphones, everywhere the same effect.

I expect all available fields to be filled when the user clicks into one field, eg "Name" and then selects the configured autofill-contact.

Is this some kind of weird safety policy to not fill in everything?

Answer 1

I found another SO answer, which indicates the name tag may also play a role in the Safari autocomplete system. You could try updating the name of each form field out of paranoia.

• https://stackoverflow.com/a/25925195/13944515

If that doesn't help, I would suggest the approach they described for determining what tags "magically work" for Safari, by inspecting the HTML of websites that got autofill working properly.

I also read this article which might interest you. It discusses trouble with autofilling in Safari, and includes some decent links.

• https://journey.temenos.com/index.php/read/tech-articles/journey-articles/410-autocomplete-of-form-fields-why-maestro-works-the-way-it-does

• Beatroot: Not having the name attributes "street" and "zip" is EXACTLY the reason. annoyingly, iOS fills all fields according to autocomplete attribute, but address and postal code have to have the "correct" name attribute. only god knows why. my example was a bit clumpsy, because this actually works. But many frameworks and plugins the name of the field cannot be changed. i have a fix for this, using inivisible, not hidden, fields and jQuery. will post it here when ready and edit the post to reflect the problem better.
• Beatroot: actually i wanted to give you the bounty for this. but it seems it's not possible unless you get another upvote. it'll happen i hope :-)