23
loading...
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.
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>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).
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).
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.
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.