Your favourite way of styling forms

HTML & CSS
1

I have realised that the majority of my forms are really fairly bland. I like my code to be clean, but that doesn’t have to mean boring forms.

I used to have links to several great articles on elegant and clean form creation - and there are one or two in the SP article base, but I was wondering if anyone had some favourite techniques/articles they’d like to share to give me some fresh ideas to glean?

2

I don’t follow any articles. As for favorite techniques, I just do what the design requires and treat the form items like any other elements. If I have no graphic design to follow, I often just add some padding to text fields, textareas and buttons. Adding solid borders to everything. Adjusting the font family and size to make sure Firefox doesn’t use the default sans-serif which often doesn’t match the rest.

The use of the :focus selector can be a nice touch to switch background color or border when the textfield is focused. It’s very quick to do and users appreciate it.

For one project I had to style a file input. That, however, is a ***** to do and I ended up adding a “fake” form, hiding the real one and making it work with Javascript.

3

I wrap the form elements within list-items. this gives me another layer to control with css


form
fieldset
legend  /legend
  ul
   li
    label
    input/texarea/select
   /li
etc...

You can also manage some style items with javascript using onFocus/onBlur/onChange

input type=“text” name=“x” onFocus=“dofunc()” onBlur=“doNuther”

4

Both of those responses actually bring up another point which wasn’t even particularly relevant the last time I was idea hunting - access from mobile devices and levels of JS and CSS support. Obviously with graceful degradation it shouldn’t be a massive issue, but has anyone come across any recurring nightmares?

The :focus selector is actually worthwhile now with the advent of IE8 and browser stats as they stand - another thing that wasn’t the case a few short years ago, nice one dnordstrom :slight_smile:

esearing - how are you achieving good horizontal/vertical alignment with that very elegant code? Also curious as to the function of a list here - is that just for semantic code structure or are you using the markup to hook in CSS/JS?

5

I like to style forms in a way that works well with the page they are in.

I have a set of insurance forms that I’ve needed to adjust (styling-wise) to various pages (partner sites).

Because I want my forms to be accessible, I generally only have form controls (or a form control for every non-form control when necessary).

6

I keep changing my mind but I tend to do things like this.

http://www.pmob.co.uk/temp/form-basic-fieldset.htm
http://www.pmob.co.uk/temp/form-basic.htm
http://www.pmob.co.uk/temp/form-indent2.htm
http://www.pmob.co.uk/temp/form-indent3.htm

It still makes sense with css turned off.

I did this one years ago but it’s not correct as it uses p elements to wrap the form controls which is not semantically correct. However it does give an idea of how things could be styled.:wink:

7

I usually wrap each form field within <div> tags.

I like to keep the form label to the left of its actual field and I make all of the labels the same width. That way, all of the form fields lineup nicely.

I don’t like big long lists of form fields. They’re cumbersome but I’ve yet to work on a better solution. jQuery is bound to be able to handle creating a more interesting method of inputting form data.

8

http://www.pmob.co.uk/temp/form-basic.htm
and

I like to keep the form label to the left of its actual field and I make all of the labels the same width. That way, all of the form fields lineup nicely.

Those usually hit me with a problem: wrapping labels, and the inputs not lining up with the bottom line (which I think makes sense and puts the input where the eye expects it).

I once saw an idea where the inputs were always absolutely positioned right and bottom and so they were always in the right place (because the growing and wrapping label made the div container, or the label itself, taller) but I never actually tried it because I didn’t feel comfortable with abso-po-ing inputs.

Also ran into a SaffyChrome “bug” (if it’s a bug) where an absolutely-positioned second label, moved off-screen, caused the second input to drop down to a new line. Only display: none worked, and I had to rely on screen readers reading display: none labels to accept it (still don’t know what orca or NVDA does though).