[Multi-column Forms Without Tables] at tagSwap.net: Open Source Lasso Code

[Multi-column Forms Without Tables]

Greg Willits, March 02, 2006

I've been experimenting with some particular presentation issues that require HTML/CSS trickery or compromises to satisfy desktop browsers and handhelds.

One of them is forms. Tables are still commonly used for this, and in many cases, they pretty much are the best way to solve layout problems, but I was looking for another solution that would degrade well for either small screens or any reader that just didn't like tables.

I have found that looking for these compromises sometimes requires using tags from the limited HTML tag set for purposes maybe not quite in line with their intent. I have used the DL/DT/DD structure where the DL was used as a wrapper, the DT as the label, and the DD as the field cell. With no CSS control on desktop browser, this produces labels with the field indented below the field. Looks a little odd, but it's not too bad because all the fields are aligned.

However, this version is a little more straight forward. Two floated left divs gives me two columns. Labels and inputs are spans displayed as blocks wo we can control width, and a div around each label and field pair can be used for various visual control, and would keep them on one line when there's no CSS in most browsers.

So, really not a lot of rocket science here. This is what the code looks like.

<form>
   <div id="colleft">
      <div><span class="label stdlbl">Name</span><span class="field"><input class="stdfld" type="text" name="name" size="20" /></span></div>
      <div><span class="label stdlbl">Email</span><span class="field"><input class="stdfld" type="text" name="email" size="20" /></span></div>
      <div><span class="label stdlbl">Phone</span><span class="field"><input class="stdfld" type="text" name="phone" size="20" /></span></div>
      <div><span class="label widelbl left">Fax</span><span class="field widewidth"><textarea class="widefld" name="textareaName" rows="4" cols="30"></textarea></div>
   </div>
   <div id="colright">
      <div><span class="label stdlbl">Color</span><span class="field"><input class="stdfld" type="text" name="color" size="20" /></span></div>
      <div><span class="label stdlbl">Shape</span><span class="field"><input class="stdfld" type="text" name="shape" size="20" /></span></div>
      <div><span class="label stdlbl">Size</span><span class="field"><input class="stdfld" type="text" name="size" size="20" /></span></div>
      <div><span class="label stdlbl empty"></span><span class="field"></span></div>
      <div><span class="label stdlbl empty"></span><span class="field"></span></div>
   </div>
</form>

Files

Tableless Forms

[Multi-column Forms Without Tables]

Files

Articles