The 2 simple use cases of improving user experience of forms just using HTML

The show/hide password pattern

In the last years, the hide/show button pattern became very popular. But a lot of people use it wrong. The mistake is in choosing the right HTML element.

People think users will interact with an element only using a mouse. Just click one time, two, etc. But the value of this pattern is more important.

Firstly, users use the keyboard quickly focusing from the field to the button using the tab key. Then they push the enter key for showing or hiding the password.

Secondly, screen readers have to detect this element is interactive. Then users can use it.

So only one element meets all these requirements — the button element. Use it and your users will be happy to use your interface.

Showing the correct virtual keyboard when you ask to enter a code

If you want to make UX of forms more simple and user-friendly you should right choose the type attribute. That's important because the attribute helps browsers show the most appropriate virtual keyboard. Thus users can more quickly fill forms. For example, if users fill in a phone number type="tel" shows the keyboard with digits and other special symbols.

But there are cases when existing values can't be applied. For example, when you sign in you want to ask users to enter a numeric code.

In these cases, you can use the special inputmode attribute that helps browsers display a correct keyboard as well. In the cases with a numeric code, you should use the numeric value. Then browsers will display the keyboard with digits only and users will fill the field quickly as well as with the type attribute.``

P.S.
? If you like this post, please, share on Twitter
? I make free written accessibility review so that you don't make common mistakes. If you're interested in that chat me on [email protected] or dev.to direct. Please, specify the subject of the email "Stas, need help"

? If you want to be first who take my tips get my paid subscription on Patreon

? Make a gift yourself or friends who like frontends: ? T-Shirt, ? Stickers, ? Masks, ? Magnets

P.S.S. This post was written with the support of my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten.