1

Lately I've been making a new application and I'm using a ton of forms. All is well except the styling of the forms isn't really that good looking. Ever since I've banned <table>'s from being used for layout purposes my colleagues are afraid to use <tables>'s all together.

Now I was wondering how you guys style your forms. If there are maybe good articles you know on form styling. And maybe even the bigger questions: Are tables used to style forms now-a-days or is it not done?

Thanks!

Edit: I've made an example of my problem not using <table>'s: http://pastebin.me/c73c128eb67172991f728fbdd902a40e - See how the two labels are not the same size. Setting a width with CSS would work but it's not dynamic which is a problem in the future.

5 Answers 5

1

Tables should be used for tabular data and nothing else.

I tend to use something similiar to the following

<form>
  <fieldset>
    <label>Input one</label>
    <input type="text" />
  </fieldset>
  <fieldset>
    <label>Input one</label>
    <input type="text" />
  </fieldset>
</form>

This then allows you to style it as such that you can float the fieldsets so they appear inline as many as you need across (two is nice) and the labels appear above the input boxes.

Of course, being CSS you can change the style on a wim!

Example: http://jsfiddle.net/UQYrg/

6
  • If I'm not using tables, how do I make sure all the <label>'s have the same width kinda how tables fix the problem. Setting a solid width doesn't seem to work that well in different forms.
    – Jeffrey
    Mar 21, 2012 at 8:47
  • Depends how you want to make the form look, hang on I'll edit the answer. Mar 21, 2012 at 8:48
  • I've edited the starting post describing my problem with some HTML code.
    – Jeffrey
    Mar 21, 2012 at 8:53
  • You can set sizes in percentages if the parent element has a size, so your form would be 100% (most likely in a fixed width wrapper), fieldset could be 50% of this, and labels 50% of this, so for example, form at 100% might be 800 pixels, the fieldsets would then be around 400 pixels, the labels would then be around 200 pixels. Mar 21, 2012 at 8:57
  • Although percentages are better than fixed widths, it's still possible for them to be too small. I'm searching for a solution where the labels would behalve like a table column and all keep the same width. Preferably without using JavaScript.
    – Jeffrey
    Mar 21, 2012 at 8:59
1

I've recently read a pretty good article related to form styling. You should give it a try:

http://www.sitepoint.com/style-web-forms-css/

EDIT:

Oh and i've forgot to say, don't be afraid of using tables when you have to build forms.

1
  • One of my first Google hits, and I wasn't that impressed with it. It's more about the looks and colors, instead of spacing and aligning. That's more what I'm looking for.
    – Jeffrey
    Mar 21, 2012 at 8:45
1

Using tables for design forms is good. You can suggest your colleagues to use them if necessary for forms. Tables gives you more control on design and may work good for cross-browser

1

I still prefer using <table> for making forms. But if the condition is such that you want to avoid it, you can try the grid layout (960.gs). Apart from site layout it can be used for other purposes also like tables, rotators, boxed content elements etc.

3
  • not a good suggestion. <tables> should always represent tabular data by semantics. Form can be styled well using only div, label and input tags
    – kishu27
    Mar 21, 2012 at 10:21
  • Yes, by semantics it shouldn't be used but then it's better than other options in terms of clean code and size. Using Divs for making forms can get very complicated if the form is big. Also editing it is a problem. I would never suggest using table for anything else...like making layout or content boxes etc. But in terms of form layout it makes work easy. Mar 21, 2012 at 11:14
  • Divs should be rather avoided for forms as they themselves again don't add much meaning to form elements. There is a great article here gethifi.com/blog/html-forms-the-right-ways I suggest everyone to give it a read and stop using Tables because the biggest problem with table layout is that at times you might have to change your HTML itself for some styling issues.
    – anuj_io
    Mar 21, 2012 at 18:43
0

have a look here...

http://whospent.com/login.php

I would be willing to explain if the codes don't about anything there.

1
  • It looks good, but it does have fixed width labels. Thanks anyway!
    – Jeffrey
    Mar 21, 2012 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.