Form design

Forms Are a UX Problem Before They Are a Code Problem

Geri Reid has published a practical, easy-to-read guide on form design. It deliberately sidesteps the coding side of things; instead, it focuses on the design and user-experience rules that should shape the code in the first place.

Working on a design system for a bank has taught [me] a lot about forms. I’ve watched testing in our labs. I’ve worked alongside experts from specialist accessibility organisations. I’ve seen forms tested by disabled people and users of assistive technology. I’ve also read a lot of research.

From all this learning I’ve formed my own forms best-practice guidelines.

Even so, there is one coding detail Reid keeps returning to: every single input field needs a connected label. That is fundamental HTML, yet an astonishing number of sites skip it. The real-world cost can be severe. Reid recounts how a group of blind college applicants couldn’t complete their applications because they couldn’t tell what the form fields were asking for. The experience was so demoralizing that some started doubting their ability to handle college at all.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

<!-- or -->

<label>
  Name:
  <input type="text" name="name">
</label>

Reid suggests that this failure deserves the same satirical treatment The Onion gives to mass shootings, which it famously recycles under the headline “‘No Way To Prevent This,’ Says Only Nation Where This Regularly Happens.” The web version, writes Reid, should read: “‘No Way To Prevent This’, Says Website Where The Fix Would Be Typing A Handful Of Characters.”