Ios Safari Autofill / Autocomplete Sections Not Working

I have a web app with a form that allows a user to enter contact information for several of their friends. When a user attempts to use the 'AutoFill Contact' option that pops up wh

Solution 1:

It looks like you have part of how section-* works, you just need to include a token after your section identification.

For example section-friend1 given-name:

    <label for="SendRequestTo1FirstName">First Name</label>
    <input type="text"id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1 given-name" />

Here is an example from the spec, with some examples and the available tokens. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

Update:

Safari Caveats Safari is really terrible with autocomplete. There isn't any documentation around what it is looking for, and doesn't seem to use any of the autocomplete standards. It seems to use a mix of id attributes and name attributes, or looks at the <label> content for the input.

Here are the best resources I found around getting both desktop and iOS Safari to work:

Blog: https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/

Codepen: https://codepen.io/grigs/pen/YqoyWv

Credit Card autofill: https is required in order for autocomplete to work for credit cards. Self-signed certificates do not work for Safari iOS (includes ChromeiOS), but work on desktop.

Hope this helps!