How does autofill work in safari

My contact contains both my home address and my work address. Safari only wants to autofill my home address. The autocomplete attribute is ignored. Instead, there is some sort of magical heuristic that Safari is using. In the video above, I edit the labels of two fields. Both have autocomplete set as well as name and id which should help Safari identify the field.

As mentioned earlier, Safari needs to see more than one field to trigger autofill. Then I try changing the label to CCNumber which continues to work. However, changing it to CC Number breaks the autofill. Basically, Safari has an unpublished list of terms that it is searching for.

Fortunately, Jacques Caron was able to extract a list of strings from the iOS Simulator that Safari appears to be looking for:. However, putting the same values into the autocomplete attribute will not work. I think it is. To take advantage of autofill for Firefox and Edge users, you have to hope that the values you pick for the name attribute match what developers on other sites have used. One way to do this would be to survey popular sites and see what they use and then use the same values.

Or perhaps use the same values as the autocomplete field in hopes that as more web developers become familiar with the standard that they will start using those names for their fields. Unfortunately, there is no way to guarantee that your Firefox and Edge users will have previously visited a form that uses the same name values as your form does. Using the list that Jacques Caron was able to extract, you can modify the values for the name attribute or the label to match what Safari expects.

No one does. I suspect that autofill is a blindspot for web developers and designers. Therefore, it is critical we test our products to ensure that they work well with autofill. No browser currently supports all 53 fields. There is a lot of movement from browser makers towards tackling the problem of web payments. Plus, rumor has it that Apple Pay will be available on mobile web for the holiday shopping season which makes it feel like this new momentum around web payments might be real this time.

This renewed focus on streamlining the web checkout process has me optimistic that support for autofill detail tokens will grow in the near term. And these tokens make creating forms that work with autofill so much simpler.

And most importantly, supporting autofill will make filling out forms less tedious for our users and lead to increased sales for e-commerce sites. Is autofill affected by attempts to improve the usability of credit card inputs using JavaScript?

They separate the number into groups of 4 by inserting spaces, amongst other things. Instead, the user will have payment apps digital wallets installed on their system, and the browser will act as an intermediary, which connects web apps to these wallet apps. Very cool! Online shopping is of major interest for Apple, with many studies revealing that the iPhone and iPad are winning this particular battle and I really liked how you said in conclusion that supporting autofill will definitely make filling out forms less tedious for our users.

My biggest concern is about the credit card number and its data. If the browser saves that data like Firefox and IE without asking and later shows the previous data, another person could see and retrieve those information without the knowledge of the first user.

Preaching without doing it yourself would be weird wouldnt it be? I agree totally on this point. Auto fill is so much handy, and wondering when it would be going to mobile devices as well. As the typing on that kind of keyboard is so wonky. Thanks for this. While mainly relevant to the front end devs I think this is required reading for all. Want to post your name only? An invisible field named address and one named phone could be filled by autofill, it not knowing that these are not fields you wanted to fill.

Chrome looked into it. The problem is with the way Codepen handles the iframe and the fact that the iframe has a different domain. I have two questions after reading it. Do label elements need to use the for attribute in combination with an id on the input element or does nesting the input inside the label work the same? And does hiding labels in various ways display:none, large text-indent, opacity etc hinder autocomplete from happening?

Thanks for the article. Today I learnt something new and very useful. I have been searching, searching, searching for how to do this! Chrome makes is so easy! Microsoft is so into collecting personal information they forgot about actually using their product!

Click here to learn more. Mac Help Desk. Find a Fix. Here is more guidance. Mac security guide. Youtube channel. Contact support. Blog FAQ. User names and passwords Save user names and passwords you enter on webpages, then easily fill in the saved information when you revisit the same webpages. Click Edit to view or edit your saved information. Credit cards Save the credit card number, expiration date, and cardholder name you enter on webpages, then easily fill in the saved information when you use the card again.

Other forms Save information you enter on webpage forms, then easily fill in the saved information when you revisit the same webpages.