Forms with multiple columns, no tables

Question

How to position a complex form with multiple fields in line across the screen?

score 4 · Answer 1 · answered Apr 21 '09 at 14:14

4

Why are people so hell-bent on avoiding tables?

Tables are not deprecated and should be used when displaying content which logically belongs in a table.

If your form is logically grouped such that a table would be intuitive, please use a table.

Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."

If you want a fluid form with a variable number columns, then disregard this.

answered Apr 21 '09 at 14:14

Ben S

68,394
30
171
212

14

Whether or not tables *may* be better for this situation is not the question. He's asking how to do this layout without them. So, your answer really isn't helping much, per se. – KyleFarris Apr 21 '09 at 14:47
1

It's the cleanest and simple, but not maintainable to use a table. A fluid form could be self-maintainable. – Guillermo Gutiérrez Sep 12 '12 at 22:33
I agree with the above comments. I use tables to display some forms, but I came to this question because tables don't really work for a particular form that I am building. – DuneBug Mar 24 '13 at 16:37
"Tables are not deprecated and should be used when displaying content which logically belongs in a table." This is true, however, it means you should use a table to represent tabular data (for example, grids). You should NOT use tables to design your layout. – drigoangelo Dec 03 '13 at 16:55

score 3 · Answer 2 · edited Jan 09 '19 at 08:42

I prefer the slightly-more-semantic way, using a definition list:

<dl class="form">
    <dt><label for="input1">One:</label></dt>
    <dd><input type="text" name="input1" id="input1"></dd>
    <dt><label for="input2">Two:</label></dt>
    <dd><input type="text" name="input2" id="input2"></dd>
</dl>

Then your CSS:

dl.form {
    width:100%;
    float:left;
    clear:both;
}
dl.form dt {
    width:50%;
    float:left;
    clear:left;
    text-align:right;
}
dl.form dd {
    width:50%;
    float:left;
    clear:right;
    text-align:left;
}

This should produce a form centered in the page, with the labels in the left column and the inputs in the right

Hudson Hawk · Answer 3 · 2009-11-20T02:49:01.490

After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive

and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.

<style>
.formcol{
float: left;
padding: 2px;
} 
.formcol label {
font-weight: bold;
display:block;} 
</style>

<div class="formcol">
    <label for="org">organization</label>
    <input type="text" id="org" size="24" name="org" />
  </div>
 <div class="formcol">
    <label for="fax">fax</label>
    <input type="text" id="fax" name="fax" size="2" />
  </div>
  <div class="formcol">
    <label for="3">three</label>
    <input type="text" id="3" name="3" />
    <label for="4">four</label>
    <input type="text" id="4" name="4" />

    <label for="5">five</label>
    <input type="text" id="5" name="5" />
  </div>
 <div class="formcol">
    <label for="6">six</label>
    <input type="text" id="6" name="6" />
  </div>

score 2 · Answer 4 · answered Apr 21 '09 at 14:17

There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:

<div class="formWrapper">
<form>
   <div class="formItem">
      <label for="firstName">First Name:</label>
      <input name="firstName" id="firstName" class="required" type="text" />
      <span class="validator" style="display: none;">*</>
   </div>
   ... <!-- Rinse repeat -->
</form>
</div>

<style type="text/css">
   .formWrapper { width: 400px }
   .formWrapper .formItem { line-height: 35px; height: 35px; }
   .formWrapper label { width: 50px; }
   .formWrapper input { width: 100px; border: 1px solid #000; }
   .formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>

Hope that helps.

score 1 · Answer 5 · answered Apr 21 '09 at 14:06

1

That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).

answered Apr 21 '09 at 14:06

brettkelly

27,655
8
56
72

score 1 · Answer 6 · answered Apr 21 '09 at 14:09

1

Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151

answered Apr 21 '09 at 14:09

Joe

2,407
18
20

score 1 · Answer 7 · answered Apr 21 '09 at 14:17

1

I suggest you blueprint CSS framework. Have a quick look at the demo page.

answered Apr 21 '09 at 14:17

Irukandji

1,208
10
22

score 1 · Answer 8 · 2009-04-21T21:27:25.137

This is what I usually use when I need to design pretty complex forms.

HTML:

<fieldset>
    <legend>Consent group</legend>
    <form>
        <fieldset class="nolegend">
            <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p>
            <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p>
            <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p>
     </fieldset>
        <fieldset class="nolegend">
            <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</fieldset>

CSS:

body, input, textarea, select {
    font: 1em Arial, Helvetica, sans-serif;
}
input, textarea, select { font-size: .8em }
fieldset,
fieldset legend {
    background-color: #EEE;
}
fieldset {
    border: none;
    margin: 0;
    padding: 0 0 .5em .01em;
    top: 1.25em;
    position: relative;
    margin-bottom: 2em;
}
fieldset fieldset {
    margin: 0 0 1em 0;
}
fieldset legend {
    padding: .25em .5em 0 .5em;
    border-bottom: none;
    font-weight: bold;
    margin-top: -1.25em;
    position: relative;
    *left: -.5em;
    color: #666;
}fieldset form,
fieldset .fieldset {
    margin: 0;
    padding: 1em .5em 0 .5em;
    overflow: hidden;
}
fieldset.nolegend {
    position: static;
    margin-bottom: 1em;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
}
fieldset.nolegend p,
fieldset.nolegend div {
    float: left;
    margin: 0 1em 0 0;
}
fieldset.nolegend p:last-child,
fieldset.nolegend div:last-child {
    margin-right: 0;
}
fieldset.nolegend label>span {
    display: block;
}
fieldset.nolegend label span {
    _display: block;
}

I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.

score 1 · Answer 9 · answered Jan 20 '12 at 13:14

Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?

score 0 · Answer 10 · answered Apr 15 '15 at 19:39

I prefer to use fieldset to group all elements and p for each form field.

<html>
<head>
<style type="text/css">
    fieldset {
        width: 500px;
        background-color: lightblue;
    }

    fieldset legend {
        font-weight: bold;
    }

    fieldset p {
        clear:both;
        padding: 5px;
    }

    fieldset label {
        text-align: left;
        width: 100px;
        float: left;
        font-weight: bold;
    }

    fieldset .Validator {
        color: red !important;
        font-weight: bold;
    } 

</style>
<head>
<body>
    <form>
        <fieldset>
            <legend>Data</legend>
            <p>
                <label for="firstName">First Name:</label>
                <input name="firstName" id="firstName" class="required" type="text" />
                <span class="Validator" style="display: none;">*</span>
            </p>
            <p>
                <label for="lastName">Last Name:</label>
                <input name="lastName" id="lastName" class="required" type="text" />
                <span class="Validator">*</span>
            </p>
        </fieldset>
    </form>
</body>
</html>

score 0 · Answer 11 · answered Apr 21 '09 at 14:15

input fields, by default, are inline. Therefore, you can simply use line them up without
Another option if you want them lined up correctly is as follows:

<div id="col1" style="float: left;>
    <input type="text" name="field1" />
    <br />
    <input type="text" name="field3" />
</div>

<div id="col2" style="float: left;>
    <input type="text" name="field2" />
    <br />
    <input type="text" name="field4" />
</div>

Forms with multiple columns, no tables

11 Answers11