Plot
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.
Solution
After some research I stumbled upon the correct usage for autofilling a city field:
<input
type="text"
autoComplete="home city"
/>
Conclusion
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.
<input
id="personalNumber"
autocomplete="tel"
placeholder={t(`contractFormPlaceholders.personalNumber`)}
type="number"
inputMode="decimal"
required
/>
As you can see, the input field is using much of assistive native HTML features & not relying on javascript (example for input validations).
Do you make use of any other native HTML attributes that further improve the end user experience than the one's mentioned above? Feel free to voice some helpful one's in the comments below 👇
Cheers!
Top comments (4)
I’ve learned one that changes the word or icon of the “enter button” on keyboard. It’s an “input” attribute called “enterkeyhint”. The value of it can be “enter”, “done”, “go”, “next”, “previous”, “search”, and “send”! I found it through Smashing Magazine (see #6): smashingmagazine.com/the-smashing-... 😀
What about this? address-level2 . I have used this on my react form and its works great.
As far as I see, using the address-level(n) may turn out to be complex as it varies from country to country. Quoting on the MDN docs here, developer.mozilla.org/en-US/docs/W.... if you see the section for United Kingdom, the town / city corresponds to
address_level1:)Gracias por compartir.