/dev/nikc/blog

A good form is invisible: it just works. In contrast, a broken form makes you want to pull your hair out, simply because it forces you to put your efforts into a side effect, not into what you’re trying to accomplish.

Broken keyboard access

When I fill out a form I often submit it by hitting enter. I’m already using the keyboard, so that’s the logical thing to do. Too often one of two scenarios occur:

1. nothing at all happens, e.g. the form is not submitted
2. the action I was attempting to do fails

The first scenario is related to broken markup; the inputs are not wrapped in a form element, so the browser can’t possibly know where and how to submit the data. (Back in the days it could’ve simply been a missing submit-input, but browsers are nowadays less picky about that.)

The second scenario is harder to define, but most likely happens because the form handler listens to the wrong event and/or the form’s action isn’t directed to its proper handler.

If you fail at this, you should probably also read up on how to setup proper tab order.

Broken validation

Client side validation is useful. It saves me from the frustration of submitting a form, only to be presented with the same form again (hopefully with an added error message). In the worst case all the inputs are also left blank.

Using a modern browser, I find it lovely how it nowadays¹ can fill out forms for me, e.g. shipping information in online stores. Just a few days ago, I made a purchase at a store where each approved input was flagged with a small green tick next to it. It didn’t, however, manage to validate more than the first input, when my browser filled out the whole form at once. In the end, I was forced to tab through each input–leaving the contents untouched–to be able to submit the form and complete my purchase.

The reason for this is most likely lacking understanding of Javascript events. Instead of listening to (change) events on the containing form element, each input is observed separately, thus necessitating a focus and sometimes also the blur event to happen on each input separately.

Sadly, browser support for input validation isn’t yet a complete replacement. However, you should use feature detection and revert to Javascript validation only when it’s needed. (And when you do, you should make sure it works, not just that it works on my computer

Broken login

By far my biggest pet peeve is broken login forms, since I use them very often. Especially since the usefulness of the reason for breaking them is marginal at best; placeholder values.

It’s far too common to populate the username input with the value “username” and the password with the value “password”, and then leaving out actual labels to save space in the layout. That last sentence should already tell you you’re doing something wrong, but at the very least the fact that password inputs don’t display the default value as readable text should give you a hint.

The original intent might be benign, but when done wrong it breaks my password manager², in the end actually causing me several extra steps to use the form, which is hardly a good outcome.

If you really want to use placeholders, use the placeholder attribute. It will work as you expect and already works in most browsers. If it isn’t supported in a browser, it should hardly be considered a showstopper, as you’re already describing the inputs with labels, aren’t you.

If you need to quickly prototype a piece of code, possibly also share it with someone, you have plenty of tools to choose from. Here’s a few I’ve run into.

• Codepad
  • The only one that’s not targeted at browser code
  • Has the broadest set of runnable languages of the lot, but no way of providing input
  • Great for 99 Bottles prototyping, if you don’t want to install the compiler/interpreter locally
• JSFiddle
  • The swiss army knife of browser code prototyping and sharing.
  • Emphasis on scripting, like the name suggests
  • Allows bootstrapping to several JS frameworks
  • External resources supported
• JSBin
  • Provides a vast selection of libraries to include
  • Allows editing the whole html document
• Tinker.io
  • Open Source JSBin-like tool
  • No external resources provided
• Dabblet
  • Has nowadays expanded to JS territory, too, but emphasize is on HTML and CSS prototyping.
  • Stores your code as a Github Gist
• Github Gist
  • Snippets of code (or text) for public or private storage.
  • Highlights several languages, but doesn’t run anything
  • Can optionally contain multiple files in a single Gist
• Tinkerbin
  • Supports compile-to-languages, i.e. HAML, Sass and CoffeeScript
• Tmpltr
  • Rapid prototyping of data bound templates
  • Include external resources by drag-and-drop upload
• Plnkr.co
  • Collaborative tool for creating “Plunks”, which can be forked by others, and optionally also private
• CodePen
  • Looks quite similar to many others, but offers a Pro-version with an improved feature set
  • Seems to focus more on brandishing a complete creation, rather than just sharing a snippet of code