This post originated from an RSS feed registered with Python Buzz by Ian Bicking. Original Post: Little form display tweaks Feed Title: Ian Bicking Feed URL: http://www.ianbicking.org/feeds/atom.xml Feed Description: Thoughts on Python and Programming. Latest Python Buzz Posts Latest Python Buzz Posts by Ian Bicking Latest Posts From Ian Bicking

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.