Four tips which could improve your HTML forms and inputs
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
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.
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.
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.
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.
How to improve your image performance
By following these steps you can improve the image performance on your site, which should improve the experience for your visitors and give you a better PageSpeed score.