CSS for laying out forms

What do you do? Tips, tricks advice...

[Reflection]

Just wondering how others approach laying out forms using css. Keeping everything lined up properly can be a challenge at times, such as grouping radio buttons together etc. Validation can also be a pain.

So how do you go about formatting your forms using css?

[BlobFisk]

Interesting question, Reflection!

I tend to use layers to align form elements along margins (I'll freely admit to having used tables for this once upon a time!)... But it does depend on the page itself.

[Nick_W]

Fieldsets and Legends [webmasterworld.com]

Nick

[BlobFisk]

Superb - every day is a school day!

[TheWhippinpost]

I've stuck with slammin them in a table - So long as you tabindex and label the fields there shouldn't be a problem in terms of accessibility.

[TheWhippinpost]

Oh, and fieldsets, nice one Nick ;¬)

[Reflection]

Nice example Nick.

"Superb - every day is a school day!"

This forum is great for that :)

Now how about more complicated things like radio buttons?

[edit_g]

I'm tables all the way when it comes to forms - I'll have to do some homework now though... Cheers Nick :)

[Reflection]

Ok after playing around a bit I have a question:

Say you want to have a question and 2 radio buttons for yes & no

Do widgets make you happy?______O Yes______O No

Would it be appropriate to do this and then use css to put everything on the same line?

<fieldset>
<legend>Do widgets make you happy?</legend>
<label for="yes">Yes</label><input name="happy_widgets" id="yes" type="radio" value="Yes">
<label for="no">No</label><input name="happy_widgets" id="no" type="radio" value="No">
</fieldset>

Or is that the wrong way to go about it/inproper use of <legend>?

[Reflection]

Just giving this a bump, if anyone can answer the above question I would appreciate it, thanks.

[BlobFisk]

That looks good to me, Reflection. Does it validate?

[SuzyUK]

Reflection

I think that this is a perfect use of legend..

I don't know mind you, I haven't validated or tested but the possibilities of nesting fieldset and legend tags then becomes apparent..

My thoughts:
You can use one fieldset/legend to surround the whole form, the use subsets of fields (fieldsets) with their appropriate legends to split the form into areas.

I also use <label> to line up forms (table style) and using fieldset/legend the way you describe you could then specify different class names on your fieldsets to allow for <label>'s that have radio buttons as opposed to <input> fields..

Will try an example and see if validates..

but I like it!

Suzy

[Reflection]

Just checked and it does validate with a simple example, havent tried yet with my more complex form which has a bunch of nested fieldsets, will do when I get finished.

Thanks gusy and gals :)