Losing poor habits with forms

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">

Instead, do something like this:

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

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>

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}">

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

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.