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.
<input type="email" /> will open up the right virtual keyboard on
mobile. The same goes for
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 ↗.
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
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
The other possible values for
text, numeric, decimal, search, email, tel and
To learn more about it, check out the MDN documentation for inputmode ↗.
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
Checkout the full documentation for enterkeyhint on MDN ↗.
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
category you can use
given-name, additional-name, family-name, nickname, honorific-prefix, honorific-suffix
username. If you don't need to break it down into different parts, you can
The same goes for
address. Check out the available attributes on the
MDN documentation of
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 ↗
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