Today I learned
Input Attributes for better Forms
Filling forms can be an annoying and painful user experience, especially if you're on mobile. If you've ever tried to fill a long form on your phone and the inputs weren't set up correctly, you know what I'm talking about.
The wrong keyboard opens, and you have to switch to special characters or numbers all the time.
But this can be made so much easier and user-friendly with some simple steps. Using the right input type value for the input is the first and, in most cases, the only step you need to take.
For example, <input type="email" /> will open up the right virtual keyboard on
mobile. The same goes for type="url", type="tel" or type="number".
But there are more attributes you can offer to make the user experience even better.
Big thanks to Jeremy for teaching me about these attributes in this great article Three attributes for better web forms Opens in new tab.
inputmode
Inputmode is an attribute that can tell the browser to show a specific virtual
keyboard. This is redundant if you've already set the type to
email, tel, url or search.
But if you have an Input with the type text and you want to tell your users to
enter numbers there, inputmode="numeric" is super helpful. You can even
enclose the input by using pattern="[0-9]*".
The other possible values for inputmode are
text, numeric, decimal, search, email, tel and url.
To learn more about it, check out the MDN documentation for inputmode Opens in new tab.
enterkeyhint
As explained above, the inputmode provides help to show the correct virtual
keyboard, whereas the enterkeyhint attribute provides help to specify what is
shown on the enter key on a virtual keyboard.
The possible values are enter, done, go, next, previous, search, send. This is
helpful in tailoring the user experience to the specific input. For Contact
forms, it's usually send, and for search forms, it's search.
Checkout the full documentation for enterkeyhint on MDN Opens in new tab.
autocomplete
The autocomplete attribute is my favorite one. It doesn't specify the virtual keyboard, like the previous attributes. Instead, it tells the browser that there are values that could be used to pre-fill the Inputs.
This is such a great feature because it makes filling Forms a way more pleasant experience.
There are several categories with different values you can use. For the name
category you can use
given-name, additional-name, family-name, nickname, honorific-prefix, honorific-suffix
and username. If you don't need to break it down into different parts, you can
use name itself.
The same goes for tel and address. Check out the available attributes on the
MDN documentation of autocomplete Opens in new tab.
That's it; these are three awesome attributes you can use to make your forms more user-friendly. I made a CodePen to showcase all the attributes explained in this post. Check it out:
CodePen - Input Attributes for better Forms Opens in new tabI hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.
If you want to support me, you can buy me a coffee. I would be very happy about it!
☕️ Buy me a coffee ☕️I wish you a wonderful day! Marco