Ian Bicking: the old part of his blog

Little form display tweaks

A couple little things I've done recently to make forms more pleasing (at least, pleasing me). One is the use of ↓ (↓) for errors, like:

↓You fucked up this form field↓

Anyway, even though it's a little thing (and a little arrow), it makes the error messages read much better to me. When error messages (or any message) show up above or below a field, it's unclear whether it's referring to the field above or below. It takes a little deduction, like looking at the top of the form (to see if the form starts with a label or a field), or deciphering the error message to see if it makes sense for the field above or below. As small as it is, the arrows allow you to read through the error message and go directly to the error field without thought. Turning the bad field pink also helps, but no reason you can't use both.

I've also played with a little CSS for radio fields. Here's some fields:

<label class="radio" for="answer_yes">
  <input type="radio" name="answer" value="yes" id="answer_yes"> Yes
</label>
<label class="radio" for="answer_no">
  <input type="radio" name="answer" value="no" id="answer_no"> No
</label>
<label class="radio" for="answer_maybe">
  <input type="radio" name="answer" value="maybe" id="answer_maybe"> Maybe
</label>

label.radio {
  display: block;
  border: 1px white solid;
}

label.radio:hover {
  background-color: #eeeeee;
  border: 1px black solid;
  padding: 0px;
  margin: 0px;
  cursor: pointer;
}

Yes No Maybe

Unfortunately these don't work well if display: block doesn't work, and I'm not sure if it will on all browsers. Without the CSS, all the choices will get smushed into a single paragraph. If you put <br> tags after each option, then the buttons won't be packed together well when styles are working. I'm not sure what to do about this.

Anyway, I think the CSS helps, because while <label> is nice (especially for checkboxes and radio buttons), most users won't notice it's there. This makes the label feel active and manipulatable.

Comments:

Thankfully, display: block has excellent support across all modern browsers (NS4 may screw it up but other than that you're fine). Unfortuantely IE for Windows doesn't support :hover on non-links, so users of that browser won't see your funky label highlighting effect. There's a workaround for that if you don't mind weird and wonderful hacks: http://www.xs4all.nl/~peterned/csshover.html

# Simon Willison

---

How about putting the radio group items in a list? Then they will render in different lines by default. Not sure how that will work with the label tags though.

# Andy Todd

---

I have mixed feelings about those radio buttons. I think it looks better but I'm not sure that the highlight makes the button any more usable.

The highlighting of the radio button is a little misleading since the highlighting does not come on if and only if the radio button can be selected.

# Victor Ng

---