HTML autocomplete value for "city"
Originally published atdev.to
A few days ago I was building a form in React that would take in user's address fields such as address lines, postal code, city, country, etc.
Following some practices, I wanted to make use of the HTML's native attributes such as autocomplete, placeholder, inputMode, etc. on form fields as that would result in a good end user experience.
The autocomplete attribute provides an automated assistance in filling out form field values, as well as guidance to the browser regarding the type of information to expect in the field.
Generally, when the autocomplete attribute is not provided, the input field suggestions are random, and up-to the browser.
Why this blog post?
While implementing the autocomplete attribute for an address form, I referred to the web development bible: The MDN, specifically the docs for the autocomplete attribute
Surprisingly the docs don't mention the value for autofilling a "city" input field.
After some research I stumbled upon the correct usage for autofilling a city field:
After using the autocomplete attribute for my form fields, I was conscious about this browser feature whenever I would visit other websites to fill out forms.
Astonishingly, I see that many large scale websites / brands don't use this attribute yet 😐
I also noticed the payment gateway providers make good use of the attributes (like: autocomplete="cc-number") that help in autofilling appropriate credit card information 🤔
Now, whenever I'm building forms, a typical input field would have the following attributes / properties.