Poor Form Design
Here I am in an airport in Detroit looking to sign up for wireless. A two and a half hour layover meant my time would be more enjoyable if spent online. But the sign up form certainly had some deficiencies. Here's a screenshot of a portion of it.
The designer probably felt that it just looked nicer if the label appeared under the field. I tabbed through the form (because using the touchpad on a laptop just isn't my picture of heaven) and then got to the bottom of the window. There was still more form to fill out but when I tabbed to the next field it scrolled just enough to reveal the field and not the label. I had no idea what I was supposed to fill out. I had to scroll down to reveal the rest of the form and then go back to the field I wanted to fill out.
From an accessibility point of view, the labels were not explicitly associated with the fields either. This would likely add confusion for screenreader users.
Put the label above or to the left of the field. Even if you don't associate the label with the field using the
label element, you'll still make it easier for everyone to use the form.
With any design, it's important to think of your audience and how they'll interact with the site. If you're not sure what they'll do, put it to the test. Even just one or two people using the site as it's intended can reveal problems with the design.