Comments on: Building Better Forms

By: Gerhard

Gerhard — Thu, 13 Mar 2008 18:50:21 +0000

Matt,
Thank you for your thoughts - styling forms is always one of the more meticulous activities that we suffer from when coding a page. I have a question though:
Isn’t using labels+input field AND dt/dd or uls for forms redundant? The label is already uniquely associated with a field if you use the tag. What is the semantic advantage that I’m missing here?
Best,
Gerd

By: the DtTvB

the DtTvB — Fri, 14 Mar 2008 04:44:49 +0000

Sometimes, I put an input in label, like this:

text

But most times I use labels with ID, and with tr, and td.

The reason is I use Simple Machines Forums which makes heavy uses with tables.

By: MillsJROSS

MillsJROSS — Fri, 14 Mar 2008 13:14:04 +0000

Nice approach. I’m not a big fan of using the for attribute in label tags, though. The coolness factor of focusing to the element specified is diminished when you consider how very few users will try clicking on the label. To me it’s just a silly concept since you’re typing and it’s far more natural to go to the next item with a tab key rather than bring your hand back to the mouse and move it a quarter of an inch. However, if you’re dead set on using a for attribute, make sure the mouse changes when hovering over the label, so the users might see there’s functionality there.

I do like the dl approach. I’m sure it’ll upset someone who thinks the tag should only be used for terms and definitions, but I do think it’s appropriate here.

By: Matt Snider

Matt Snider — Sat, 15 Mar 2008 18:13:22 +0000

Gerhard,

I believe you mean doing something like what DtTvB posted instead, so you would have:

You could probably figure out a way to style it to look nearly similar to the DL form that I presented here. However, A) I think it would be difficult to get it to work (hack-free) in all browsers, and B) semantic use of the DL tag is for when you have a label/heading/etc and and content for/describing it.

———————–

MillsJRoss, thanks for you input. While, I agree that few people use labels to focus on form fields. Few people even know labels can do this. However using the “for” attribute is one of those finishing touches that really polishes a form.

By: Alex

Alex — Sat, 15 Mar 2008 19:03:28 +0000

Associating a label with an input using the “for” attribute is also nice for accessability (the screen reader can tell the user the exact description of the input).

I do wonder how you handle internationalisation if you set a fixed with for the form labels in your CSS? What if the label gets longer in another language? I always use tables if I want the labels on the left of the inputs because they automatically stretch.

By: slink

slink — Sat, 15 Mar 2008 19:43:41 +0000

Using definition list makes more sense when combined with additional field hints as described here: http://www.askthecssguy.com/2007/03/form_field_hints_with_css_and.html

BTW, according to “Design Accessible Web Sites” by Jeremy Sydik, try avoid using input tags inside labels for accessibility purpose.

By: Vsync

Vsync — Sun, 16 Mar 2008 08:30:50 +0000

You shouldn’t use UL nor DL elements in FORMs.
it is NOT semantic and not right, a list
should be naturally use for lists (texts most of the time) and DL should be used only for definition lists..
wrap the stuff with div and be done with it.
see what if did for Kaltura.com

By: Gerhard Schoder

Gerhard Schoder — Sun, 16 Mar 2008 20:54:14 +0000

MillsJROSS,
the ‘for’-attribute is required for accessiblity reasons - it will associate a label with an input field and the screen readers will read that out. This is _the_ standard way (as in w3c) to establish the label/input field relationship. And I believe that enlarging the clickable area for an input field can help a lot (Fitt’s law) to access it easily. This goes in particular for those small little checkboxes/radiobuttons, not only for motorically impaired users. I highly recommend it! once you started using it, you will miss it on sites that don’t use it

Matt,
it should be text, but yeah ,that’s what I meant. Look at those nodes as block level elements, and they’re not harder to style than dt,dd once you reset the styles.

By: Gerhard Schoder

Gerhard Schoder — Mon, 17 Mar 2008 02:53:13 +0000

The for attribute associates the label-text with the input field in a semantic way. If you build for assistive technology, it is required markup.

By: Rob Wilkerson

Rob Wilkerson — Mon, 17 Mar 2008 15:20:15 +0000

@MillsJRoss:

It’s also an accessibility thing, IIRC. The for attribute is how screen readers know to associate a particular label with a particular field. Not using the attribute will fail 508 compliance tests, I believe.

By: Gerhard

Gerhard — Mon, 17 Mar 2008 17:07:13 +0000

hey matt, why do you keep deleting my comments?

By: Matt Snider

Matt Snider — Mon, 17 Mar 2008 17:46:21 +0000

Gerhard, I don’t delete comments, unless they are spam. I use Akismet, because I get about 300 spam comments a day. I’m not exactly sure how it works, but it does a great job preventing spam. However, some of your comments get put into a moderation queue first.

By: Gerhard

Gerhard — Mon, 17 Mar 2008 17:48:16 +0000

Thanks for the clarification Matt! I thought I had offended you or something :).
Great blog btw!
Gerhard