A few weeks ago at Google I/O Google announced that Chrome is now supporting the HTML5 autocomplete functionality, and that your saved autocomplete information (called autofill in Chrome) will be synced across devices. This would allow you, for instance, to add your address and credit card information to Chrome on the desktop and then allow Chrome to automatically fill out that form information when you’re shopping on your phone. This can be a huge boost for mobile commerce, which is why Google is pushing it so hard. At the time of the announcement I made a note to support this for Detailed Image at some point in the near future.
Then the past week or so we started noticing oddly formatted invalid shipping addresses getting through our system. It was only a handful – less than 10 – but this never happened before. Right away I had a thought that it could be this new autofill feature working incorrectly. Sure enough, each person had registered using Chrome within the past week. After some testing I was able to replicate the problem.
There was some form validation on our end that needed to be cleaned up, but to really make the experience smooth on Chrome we needed to support autofill. Plus there is the added side benefit of likely increasing conversions, particularly on mobile where it’s a pain to type. I figured if I’m in there fixing a bug I might as well turn it into a feature improvement while I’m at it!
Problems started to arise when I went to implement the spec. Google searches kept turning up this official blog post from January 2012 where Google announced experimental support for autocomplete. Because it was experimental, the attribute was named x-autocompletetype. They also linked to the proposed spec. Cool…or so I thought. I implemented it on our development site and nothing changed.
Thankfully someone in the comments of that post linked out to this Chromium wiki page about using autocomplete. It turns out that the attribute is now just autocomplete since it’s been accepted into the HTML5 spec. That wiki page links out to the full spec, which I was able to use to gather all of the necessary fields for our forms.
So now an HTML5 email field with autocomplete enabled might look like this:
<input type="email" autocomplete="email" name="email" />
Everything worked on the first test. In addition to our registration form I also added the autocomplete credit card fields to our checkout page.
I rolled the code out a few hours ago. You can check out the form in action over on the Detailed Image Registration page. Here’s what the registration page looks like when you select your address:
And here it is filled in, including the correct state picked from the drop down:
I had a hard time figuring out exactly what the spec was and where to find it so hopefully this post helps another developer or two out.