Building Better Forms
Most of the times when building forms, you will have a label either to the left or above the field that the label is associated with. Designers come up with all kinds of crazy ways to handle the layout, but most are not semantic and require browser hacks. In the past, I have used the following markup:
Example 1: Semantic Forms Version 1 HTML
<form> <ul> <li><label>Label1</label><input type=”text” value”" /><li> <li><label>Label2</label><input type=”text” value”" /><li> … </ul> </form>
The label can then either float left or right, or be displayed as block, depending on your needs. However, I recently saw on the social networking site Facebook.com a nice technique using the definition list tag (dl). I found this particularly appealing, because browsers (by default) and designers apply less styles to DL tags, so your design is more portable. Plus, it is a semantic to use a DL tag anytime you have key/value pairs; in this case, the key is the label and the value is the field.
Here is an example of what your Form could look like:
Example 2: Facebook Message Form
To produce such a nice looking Form, your HTML will be something like:
Exmaple 3: Semantic Form Version 2 HTML
<form action=”someURL” class=”clearfix” id=”someID” method=”post”><dl> <dt><label for=”form-msg-to”>To:</label></dt> <dd><input id=”form-msg-to” name=”to” type=”text” value=”"/></dd> <dt><label for=”form-msg-subject”>Subject:</label></dt> <dd><input id=”form-msg-subject” name=”subject” type=”text” value=”"/></dd> <dt><label for=”form-msg-message”>Message:</label></dt> <dd><textarea cols=”30″ id=”form-msg-message” name=”body” rows=”5″></textarea></dd> </dl></form>
And the associated styles:
Example 3: Semantic Form Version 2 CSS
#message form { /* Optional, just a littl nice padding */ padding: 3em 0pt 1em 9em; } #message dl { /* Replace with desired width */ width: 47em; } #message dl dt { float: left; /* Spacing between label and field */ padding: 0 1em 0 0em; text-align: right; /* Width of largest label */ width: 6.5em; } #message dl dt label { /* Make whatever you like */ color: #666; /* Labels with “for” attribute are clickable, ensure they look that way */ cursor: pointer; display: block; /* Use whatever font-size you prefer */ font-size: larger; /* Adjust padding to align with fields */ padding-top: 0.5em; } #message dl dd { float: left; /* This is the padding between form field rows */ margin: 0 0 1em; /* Remaining width dl - dt - padding */ width: 39em; } #message input.txt, #message textarea { /* Prevents x-browser bug */ overflow: hidden; padding: 0.4em 0 0.4em 0.2em; width: 33em; }
You may also need to add the “clearfix” style to the form if other elements depend on its positioning, as the content of the form floats, so it won’t have any height. Otherwise, I think the comments are pretty self-explanatory.
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
Comment by Gerhard — March 13, 2008 @ 11:50 am
Sometimes, I put an input in label, like this:
<label>text <input ... /></label>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.
Comment by the DtTvB — March 13, 2008 @ 9:44 pm
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.
Comment by MillsJROSS — March 14, 2008 @ 6:14 am
Gerhard,
I believe you mean doing something like what DtTvB posted instead, so you would have:
<form><fieldset>
<label>text <input … /></label>
<label>text <input … /></label>
<label>text <input … /></label>
…
</fieldset></form>
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.
Comment by Matt Snider — March 15, 2008 @ 11:13 am
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.
Comment by Alex — March 15, 2008 @ 12:03 pm
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.
Comment by slink — March 15, 2008 @ 12:43 pm
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
Comment by Vsync — March 16, 2008 @ 1:30 am
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.
Comment by Gerhard Schoder — March 16, 2008 @ 1:54 pm
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.
Comment by Gerhard Schoder — March 16, 2008 @ 7:53 pm
@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.
Comment by Rob Wilkerson — March 17, 2008 @ 8:20 am
hey matt, why do you keep deleting my comments?
Comment by Gerhard — March 17, 2008 @ 10:07 am
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.
Comment by Matt Snider — March 17, 2008 @ 10:46 am
Thanks for the clarification Matt! I thought I had offended you or something :).
Great blog btw!
Gerhard
Comment by Gerhard — March 17, 2008 @ 10:48 am