Form Semantics and Styling

[clintonia]

Hi all,

I recently saw a pretty good article on SitePoint:

http://www.sitepoint.com/article/fancy-form-design-css

I think the use of ordered lists and coding form elements within list
items is a little easier to style instead of using dictionary lists or
paragraph tags.

Of course, it's a matter of personal preference, but I thought I'd
share.

Peace.

[ParkinT]

It is also the 'right' way to provide markup that is accessible. I
have just been reading Sitepoint's latest book (The Art and Science of
CSS) and this is one of the overriding points made in that book.

[Mike G.]

Form styles have always be something that I've found difficult to find
good articles on. It only figures that the guys at Sitepoint were the
ones to make it happen.

I used to be a definition list guy, but the amount of markup I would
code just got to be unmanageable. I've been using this lately, and it
seems to fit most situations. Where it really fails is when you need a
group of form elements. Like a bunch of check boxes or radio buttons.

<div class="form-element">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>

div.form-element {
clear: both;
padding: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #CCC;

}

div.form-element label {
width: 200px;
float: left;

[ParkinT]

You can group form elements using fieldset (with the legend tag) and
it degrades very nicely.
You would like this article: http://www.sitepoint.com/article/fancy-form-design-css

I highly recommend the sitepoint book (http://www.sitepoint.com/books/
cssdesign1/)

> > > Peace.- Hide quoted text -
>
> - Show quoted text -

[Mike G.]

By degrades I'm sure you mean "can be progressively enhanced" right?
The folks over at Yahoo! seem to think that's a bit more positive
sounding ;)

Fieldsets are something that I do occasionally use, but rarely have
forms with enough elements that would require extra markup. I did
however get a chance to use a few fieldsets on a checkout form for a
site I'm working on. I used it to separate the shipping, billing, and
payment information.

Maybe I'm just being hard-headed though because of how difficult they
are to style. That said, my excuses are quickly running out with
articles like that floating around.