CODEWITHSUNDEEP
htmlformsstyles
Jeffrey
Jeffrey

Reputation: 2005

Form styling, what's good

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.

Upvotes: 1

Views: 312

Answers (5)

kishu27
kishu27

Reputation: 3120

have a look here...

http://whospent.com/login.php

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

Upvotes: 0

Anuj Kothari
Anuj Kothari

Reputation: 33

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.

Upvotes: 1

Kishore Kumar
Kishore Kumar

Reputation: 12874

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

Upvotes: 1

Matthew Riches
Matthew Riches

Reputation: 2286

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/

Upvotes: 1

Bogdan Emil Mariesan
Bogdan Emil Mariesan

Reputation: 5647

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.

Upvotes: 1

Related Questions