Just Frontend Things

Four tips which could improve your HTML forms and inputs

HTML

2021-02-07

This quick article includes tips and tricks for HTML forms and inputs with which you can both increase the user experience and let you get correct data sent in the form.

1. One common thing two factor authenticator is to recieve a one time code via SMS. With just a couple of attributes on the text input you can improve the user experience drastically.

If we add inputmode="numeric" and pattern="[0-9]*" the user will receive a keyboard with only 0-9.

In iOS and Safari on macOS there is an even better way, while still keeping the two attributes mentioned above, you can also add autocomplete="one-time-code". Now the user will get prompted to add the code from the incoming text message, without writing a single number themselves.

<input type="text" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code">

2. Use username/email, current-password and new-password as autocomplete values. Why? With the password autocompletes password managers can prefill the saved current password or suggest a new safe password when you're setting a new password.

<input type="password" autocomplete="new-password">

3. Sometimes you visit a page where onpaste="return false" is added on an input field. This is often used where you have to repeat your email address for example. BUT THIS IS PAD PRACTICE, dont do this!

It's bad for both for accessibility, where people who have difficulties to write might not be able to sign up on your site, and also bad for security where you rely on copy-pasting from a password manager for example.

/* DON'T USE ONPASTE LIKE THIS! */ <input type="email" onpaste="return false">

4. Add client side validation for a password field by adding a regex pattern. The pattern on the input below requires the password to contain atleast 8 characters, one uppercase character, one lowercase character and one number.

<input type="password" pattern="(?=.*\d).{8,}(?=.*[A-Z])(?=.*[a-z])">