iOS Safari Autofill / autocomplete sections not working

Question

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 when one of the form fields has focus, the info from the selected contact is used in all fields on the page instead of limiting the autofill to just the group of fields that has focus at the time.

I've looked through the documentation I could find on the autofill feature, and it looks like applying an autocomplete value of "section-*" for each field grouping should be enough. I'm guessing what I'm trying to do simply isn't possible, but input from someone well-versed in autofill settings would be much appreciated!

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form>
 <fieldset class="container">
 <div class="row">
 <h2>First Friend</h2>
 </div>
 <div class="row">
 <div>
 <label for="SendRequestTo1FirstName">First Name</label>
 <input type="text" id="SendRequestTo1FirstName" name="SendRequestTo1FirstName" maxlength="50" autocomplete="section-friend1" />
 </div>
 <div>
 <label for="SendRequestTo1LastName">Last Name</label>
 <input type="text" id="SendRequestTo1LastName" name="SendRequestTo1LastName" maxlength="50" autocomplete="section-friend1" />
 </div>
 <div>
 <label for="SendRequestTo1Phone">Phone Number</label>
 <input type="tel" placeholder="[phone]" id="SendRequestTo1Phone" maxlength="20" autocomplete="section-friend1" />
 </div>
 </div>
 </fieldset>
 <hr>
 <fieldset class="container">
 <div class="row">
 <h2>Second Friend</h2>
 </div>
 <div class="row">
 <div>
 <label for="SendRequestTo2FirstName">First Name</label>
 <input type="text" id="SendRequestTo2FirstName" name="SendRequestTo2FirstName" maxlength="50" autocomplete="section-friend2" />
 </div>
 <div>
 <label for="SendRequestTo2LastName">Last Name</label>
 <input type="text" id="SendRequestTo2LastName" name="SendRequestTo2LastName" maxlength="50" autocomplete="section-friend2" />
 </div>
 <div>
 <label for="SendRequestTo2Phone">Phone Number</label>
 <input type="tel" placeholder="[phone]" id="SendRequestTo2Phone" maxlength="20" autocomplete="section-friend2" />
 </div>
 </div>
 </fieldset>
</form>

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

• Matt Segedi: Thank you, but I still wasn't able to get my example working when using the correct tags per your suggestion. As a matter of fact, the blue gift / red gift shipping address example from the documentation itself doesn't appear to work correctly in iOS Safari. I copied it directly into a jsfiddle and gave it a try. No luck.
• jhelst: iOS safari is an undocumented nightmare. I just got this working at my place of work. Will post an update to my response soon!
• jhelst: @MattSegedi do you have a link to the fiddle?
• Matt Segedi: jsfiddle.net/qzr2b1s0/show - That's the exact code from html.spec.whatwg.org/multipage/… copy-and-pasted.