iOS Safari (iPhone SE) auto complete not working HTML5 autocomplete attributes added

Question

We have a web form, and using the tips from iOS Safari Autofill / autocomplete sections not working however the current iOS doesn't work on the codepen here: https://codepen.io/grigs/pen/YqoyWv

Is there any definitive way to get auto complete to work on iOS Safari?

And example input field is:

<div class="form-group">
   <label class="font-weight-bold input-label" for="FirstName">First name * <span class="field-validation-valid field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span></label>
   <input type="text" class="form-control input input-about-you" data-val="true" data-val-required="Please enter your first name(s)" autocomplete="given-name" id="FirstName" name="FirstName" value="">
</div>

Every other browser respects the HTML5 autocomplete hints, except iOS Safari it seems - so would be great to get it working.

The exact phone we're struggling with is and iPhone SE MX9R2B/A - so an iPhone SE 2020. I'm sure it may affect other iOS with Safari.

Answer 1

The codepen example seems correct, I just tested on iPhone SE 2nd generation - iOS14.4 Emulator

SE2020 - Example

The trick you might be missing is enabling AutoFill on Safari mobile to do this go to: Settings > AutoFill > toggle Use contact info/Credit Cards (if desired)

You might also refeer to this guide Safari's strange behavior it's from 2016 but there explains a lot of the autofill behaviour.

Answer 2

YOU ARE DOING WRONG. HERE IS A RIGHT WAY FOR HTML5 AUTOCOMPLETE

<form autocomplete="on">
    <label for="fname">First Name:</label>
    <input type="text" id="firstname" name="firstname">
</form>

HOPE THIS ANSWER WILL HELP YOU.

LEARN MORE ABOUT AUTOCOMPLETE: https://www.w3schools.com/tags/att_input_autocomplete.asp