DEV Community

loading...
Cover image for Losing poor habits with forms

Losing poor habits with forms

J.
There is always a monkey.
Originally published at blog.julien-maury.dev ・3 min read

The summer is magic but not all web forms.

It's shocking because sometimes, you just cannot use them whether you have impairments or not.

Don't forget labels and for attributes

Labels allow screen readers to voice the input prompt to the user. Unfortunately, many websites use placeholders only.

It's a terrible practice as screen readers will try to guess things, for example, by taking texts that precede or follow, which might have nothing to do with the inputs.

Besides, placeholders disappear when the inputs are focused.

So don't do that:

<input placeholder="Enter your email" name="email" type="email">
Enter fullscreen mode Exit fullscreen mode

Instead, do something like this:

<label for="email">Your Email address</label>
<input id="email" name="email" type="email" required>
Enter fullscreen mode Exit fullscreen mode

If you have to hide labels, you can still use extra HTML and CSS:

<label for="email"><span class="screen-reader-text">Your Email address</span></label>
<input id="email" placeholder="Enter your email" name="email" type="email" required>
Enter fullscreen mode Exit fullscreen mode

Forget extravagant patterns and validation rules

This one is pretty lame. "Smart" patterns and validation rules can have terrible outcomes. It prevents some users from using forms.

HTML5 allows you to add patterns to your inputs to make basic data validation:

<label for="last-name">Your last name</label>
<input id="last-name" name="last_name" type="text" pattern="[a-zA-Z]{4,20}">
Enter fullscreen mode Exit fullscreen mode

The above pattern attribute means "only letters, at least 4 and 20 at most". Many people won't be able to use this input unless they edit HTML!

Besides, as HTML is editable, it's absolutely not a security enhancement.

Please don't add rules like that, whether you use the pattern attribute or a custom validation rule in the code on submit (e.g. with a server-side language).

Don't use CAPTCHA

Alt Text

CAPTCHA means "Completely Automated Public Turing test to tell Computers and Humans Apart". The test is supposed to determine if the user who's trying to submit a form is a real human or a spamming robot.

There are various types of CAPTCHA: random letters and numbers, puzzles, basic arithmetic operations, and many more.

However, CAPTCHA sox!

It's a massive pain for real users. It's terrible for accessibility, especially for blind people (even when there's an audio version). It's also easy to break for any modern script (e.g., using Machine Learning).

Don't disable paste

Many websites disable paste for password inputs. It decreases security.

Usually, pasting passwords is allowed for the first input but not the confirmation field (e.g., "confirm your password").

There are many valid reasons to paste passwords, such as auto-fill, which is more secure. Disabling paste forces people to use short passwords they can remember, a.k.a weak passwords.

Besides, it disables the ability to enjoy some of the great features provided by password managers.

Please don't do it.

Conclusion

Most bad habits we have seen are easy to lose. Forms are great for users as long as it does not break standard behaviors and accessibility.

Photo by Drew Hays on Unsplash

Discussion (0)