Your Opinions RE form markup

Hi guys,

I’m questioning my ‘judgement’ with regards to form markup.
For the last few years i’ve been using dls to contain my forms, with the dts containing the labels and the dds containing the inputs with a dd with the class of btns containing the submits, etc.
Like this;

<dt><label for="input">Label</label></dt>
<dd><input type="text".... [I](you get the idea)[/I]
<dd class="btns">
... form submits here ...

I know this isn’t how dls are meant to be used but it’s been a nice and tidy method of handling forms, especially when it comes to ‘inline’ forms where the label and the input are on the same line so to speak.

I’ve been looking at admin/CMS templates recently on themeforest and noticed that the vast majority of them use divs or tables to contain the forms.
Personally I detest the table method as its too rigid and doesn’t allow the pages to flow naturally on smaller resolutions and I think tables are used far, far too much for the wrong purposes.
The div method isn’t too bad, but not ideal.

What do you guys think? What’s your preferred method?
Do you have any views related to my ‘method’?


Neither TABLE nor DL for that type of form. A Form Control associates those items on a form NOT a DL and I suspect in the majority of cases the TABLE was used because those web authors were cutting corners on layout.

Semantically, a form is neither (normally) about tabular data or definitions, so I wouldn’t use either. I prefer to use a fieldset to group form elements. For any more fine-grained control, a few divs might be thrown in too.

Yes, i use the fieldset.
The question I asked was more about how do you handle the subsequent content.
Personally, I don’t like the idea of having numerous labels and inputs floating around within a fieldset. A fieldset is for a group of fields, not just one.

Can you offer examples of forms you’ve created or offer some HTML examples?


There’s a tutorial here at 24Ways where an OL is used for a form…

Use CSS for positioning and layout. HTML is about structure, so form and fieldset is the way to go with a div thrown in when necessary.

Why not? It depends on how you lay them out, but there’s nothing wrong with having them all display: block if they are stacked, or separating them with a simple <br>, or floating them or using display: inline-block if they sit side by side. You can wrap them in simple <div>s if you like, but I don’t see much advantage.

A FIELDSET is a form control group container so unless the form is extremely basic and has one item only, it makes sense to use it, as it’s supposed to be used - even with one item form it is perfectly fine. Though some think it slightly overkill aesthetically if a form only contains a single input control.

If you want to see some form demos Poes the yowling cat; is really, really into them: and that’s one of her main work tasks. And as you can see there are no lists used there because there is not any list association in that type of form.

People often fall into the trap of using ‘wrapping’ OL or UL unnecessarily like they do with DL purely because they probably don’t fully grasp semantics… trying to make certain tags do things there were never designed for to make themselves feel good about tentative element associations and relationships.

Thanks for your input guys.
I’m going to give the ‘floating’ approach a go even though there’s a voice in my head screaming at me lol.