Topic: laying out forms

Hi folks,

this is something that I've been wondering for a while now I know that every developer deals has there own solution for everything but...

I absolutely hate using tables unnecessarily in my code but despite this i still seem to end up using them to lay out my forms in order to keep them looking tidy.

so I was wondering how you all deal with laying out forms in your code?


if you use anything other than tables and example would be nice to see smile

look forward to your replies folks smile

Re: laying out forms

Like this:

<form action="blah" method="post">
  <fieldset>
    <label for="name">Name:</label>
    <input type="text" name="name" size="20" />
  </fieldset>
  <fieldset>
    <label for="password">Password:</label>
    <input type="password" name="password" size="20" />
  </fieldset>
  <p>
    <input type="submit" value="Log in" />
  </p>
</form>

form {
  width:500px;
}

form fieldset {
  clear:both;
  margin:0;
  padding:2px 0;
}

form fieldset label {
  display:block;
  width:150px;
  float:left;
}

form fieldset input {
  display:block;
  width:340px;
  float:right;
}

form p {
  clear:both;
  text-align:right;
}

Re: laying out forms

thanks for that mate that is actually a really good solution smile

Re: laying out forms

I have to say I've started using your method for laying out forms kelli and I'm amazed at how much cleaner the code looks smile

thank youuuu smile

p.s. I like your website, very nice design smile

Re: laying out forms

This solution is nice and is close to what has been suggested elsewhere on the web (the main idea being a wrapping element - in this case fieldset - set to clear:both). However, you're misusing the fieldset tag, which is a semantic tag that should be used to group related input fields. Name and Password should be logically grouped into one fieldset, not two separate ones. I've seen (and used) similar solutions where div tags are used where you have fieldsets. The problem with using divs is that a div is supposed to indicate a section of a web page, but a row is usually not such a section. Perhaps a p tag is the most appropriate solution.

There's some very useful information and discussion here: http://www.websiteoptimization.com/speed/tweak/forms/
I'd ignore the information about making it work with IE5 for Mac - that browser has virtually no market share any more.

Re: laying out forms

Chris Bartlett wrote:

This solution is nice and is close to what has been suggested elsewhere on the web (the main idea being a wrapping element - in this case fieldset - set to clear:both). However, you're misusing the fieldset tag, which is a semantic tag that should be used to group related input fields. Name and Password should be logically grouped into one fieldset, not two separate ones. I've seen (and used) similar solutions where div tags are used where you have fieldsets. The problem with using divs is that a div is supposed to indicate a section of a web page, but a row is usually not such a section. Perhaps a p tag is the most appropriate solution.

There's some very useful information and discussion here: http://www.websiteoptimization.com/speed/tweak/forms/
I'd ignore the information about making it work with IE5 for Mac - that browser has virtually no market share any more.

thanks for your reply smile

that is a very interesting article with some useful tips smile

Re: laying out forms

I use an ordered list element for my list items like this

<% form_for @thing do |form| %>
<ol class="formList">
<li>
  <%= form.label :name, "Name" %>
  <%= form.text_field :name %>
</li>
</ol>
<% end %>

and style it like this:

ol.formList { list-style-type: none; margin-left: 32px; padding-left: 0; }
ol.formList li { margin-bottom: 8px; font: bold 0.7em Verdana, Helvetica, Arial, sans-serif;  }
ol.formList li label { display: block; width: 100px;  }
ol.formList li input[type=text] { width: 500px; }
ol.formList input, ol.formList select, ol.formList textarea { border: solid 1px #333; }

It seems to me to meet standards for using the correct semantic tags and renders well for any relatively modern browser.

Eifion

Last edited by eifion (2009-01-13 08:59:22)

Re: laying out forms

There are examples at smashing magazine (http://www.smashingmagazine.com/2006/11 … solutions/), and I just came across a css framework for doing forms as well: http://code.google.com/p/formy-css-framework/

Because it's what code craves.

Re: laying out forms

Thanks for the info, Chris. smile