Form Semantics and Styling

Skip to first unread message


Jun 1, 2007, 2:29:35 PM6/1/07
to Central Florida PHP
Hi all,

I recently saw a pretty good article on SitePoint:

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



Jun 2, 2007, 10:42:49 PM6/2/07
to Central Florida PHP
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.

Jun 3, 2007, 12:04:59 PM6/3/07
to Central Florida PHP
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.form-element {
clear: both;
padding: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #CCC;


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


Jun 4, 2007, 8:46:30 PM6/4/07
to Central Florida PHP
You can group form elements using fieldset (with the legend tag) and
it degrades very nicely.
You would like this article:

I highly recommend the sitepoint book (

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

Mike G.

Jun 5, 2007, 1:02:18 AM6/5/07
to Central Florida PHP
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.

Reply all
Reply to author
0 new messages