form styling

[Ninjakreborn]

I so far have been working in a different manner (slower, less rushed, more relaxed). It has helped a lot (sorry just talking), anyway.
I ended up looking into styling forms.  I started doing pure css forms, and I have really learnt all the "basics" how to apply background colors, and general styles to forms.  (I never used css on forms much before).
Now I have been trying to find out alignment to the label(input) fields.  I saw many tutorials, and none of them worked properly, or looked neat enough.

Does anyone have personal advice, or procedures they have used, that works for them
Pure CSS forms only, I could do table forms easily, but I want to start doing CSS form's.  Forms was one of the only things I previously used tables for, but no more.

Let me know if you have any advice, or personal procedures you use to style forms, examples or sanything

I saw a few, like wrapping elements in p tags, and styling those, too messy, and wrapping all labels in a big div, and below all inputs, too messy.  I want something less messy, more css oriented.

[Ninjakreborn]

I found something that addresses the issue, you ahve to do some work to the label width's, but otherwise, it works for all occassions.  "The general theory does atleast".
http://www.quirksmode.org/css/forms.html
That way if anyone else has problems with forms.

Google styling forms with css, the first 3 will teach you all the coloring, background coloring, background color to forms, input fields and labels.

That link above, will then teach you about the alignment.

[Ninjakreborn]

[code]label {
text-align: right;
width: 75px;
padding-right: 20px;
}[/code]

Actual that is the part you want to modify, modify it to something like

[code]label {
text-align: left;
width: 115px;
padding-right: 20px;
}[/code]
That will make it look right.
That should help anyone, who has any problems styling forms, you can just build your forms like normal with label tags and everything.
THen throw that code behind it, and in most situations, it will automatically fix up the alignment, staying validated and tableless.

[Ninjakreborn]

Last thing I found out, you probably want to throw a
<span id="form">
</span> around each form you want it to style, then in front of each form related style put down
#form
right in front of each, to only reference styles within that span tag.  That way the forms you don't want styled like that, don't get touched, and the ones inside the span tags, always get styled.

[ToonMariner]

OR to save unneccessary html simply give the form an id or a class and use that to style instead.