Today I learned

Input Attributes for better Forms

Edit this Post Opens in new tab

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 tab

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me 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