views:

488

answers:

10

I'm wondering whether it's acceptable to use tables for forms.

Strictly speaking, name/value pairs are tabular data, aren't they? And a form is just a user customisable set of name/value pairs. So is it right to use tables in this case? Or should I use divs styled with CSS?

A: 

If you're looking for "css purity", you should use something like this:

<form action="http://localhost/Zoleris/" method="post" accept-charset="utf-8">
    <ul class="form">
      <li>
        <label for="username">Username</label>
        <input type="text" id="username" name="username">
      </li>

      <li>
        <label for="password">Password</label>
        <input type="password" id="password" name="password">
      </li>

      <li>
        <input type="checkbox" id="remember_me" name="remember_me" >
        <label class="checkbox" for="remember_me">Remember my username</label>
      </li>

      <li>
        <a href="forgot.php">Forgot your password?</a>
      </li>

      <li>
        <button type="submit" id="btnLogin" name="btnLogin" class="button positive" style="float:right"><img src="tick.png">Login</button>
        <button type="submit" id="btnRegister" name="btnRegister" style="float: left"><img src="cross.png">I need an account!</button>
      </li>
    </ul>
</form>
ryeguy
You are missing a `<fieldset>` :)
voyager
A: 

Yes

Yes, you may use tables. Div's are supposed to replace tables for page-level layout, but not for, well, tables. Go ahead and use them within pages whenever they solve your problem.

DigitalRoss
Is it acceptable? Sure, in that it functions. However, this is not what tables are supposed to be for. A form is not a table.
ryeguy
Most of my forms have a column for labels followed by a column of input fields.
David
We may be in general agreement here. I mean, I don't think most forms should be tables, only ones with table-like appearance.
DigitalRoss
If forms are not tabular, what are they? Just look at a 1040 tax form. It's a table.
jmucchiello
+10  A: 

Both are correct.

I preffer using some div/li, as that allows me to make some different layouts, but tables for forms are not frowned upon.

Actually, by default, Django gives you table formated forms.

voyager
A: 

you can use whatever you want, it just that it is a new standard for making the layout of the html forms, and it's kinda like a rule not use table tags for design, but it's still ok to use tables for displaying a table of data (grid)

Omu
+3  A: 

You can use tables. Simple as that.

Virat Kadaru
+1  A: 

Eric, I would agree with you that form data is tabular data and semantically can live inside a table.

This is the method I use for simple data entry screens.

I wouldn't generally use divs, but possibly an ordered list

<ol>...</ol>

as the form is an ordered list of items also. I find this method a lot hard to style however.

You'll probably get 50/50 split in answers....

RR
Why an ordered list? Wouldn't a <ul> make more sense?
jmucchiello
Yes, I guess a <ul> would make just as much sense, I chose ordered as I guess an input form has some specific order to it (or could have). I'm not sure it makes MORE sense, but maybe as much sense. It's basically and either/or situation.
RR
+12  A: 

Try fieldsets

I prefer to break up the fields into logical <fieldset>s with one <legend> each, because:

  • The code is less cluttered
  • The default formatting is user-friendly (I especially like how the legend displays)
  • It's easy to style with CSS

See this article for a nice tutorial. Here's a code example:

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" />
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <legend>Questions That Are Too Personal</legend>
    <ol>
      <li>
        <label for="creditcard">What is your credit card number?</label>
        <input id="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

(Note: the "label for" thing lets you click that label to move focus to the input specified.)

Nathan Long
Agree very much. Fieldsets look more like paper forms - at least, as much as possible - with the legend, etc, in less markup than is required for tables.
mabwi
+ 1 for fieldsets + labels. Semantic HTML is really simple, and in case of labels for= add usability even to the worst browsers out there.
Residuum
A: 

Some people will say yes, some no.

Here's a way for you to decide: If it truly contains tabular data, then it should, at least according to WCAG, have a summary attribute. The summary attribute should describe the purpose and structure of the table for the benefit of screen reader users. Can you write such an attribute? If so, then you should do so, and include it on your table. If you can't, then it probably isn't a really a table and you should look for another way of laying out your form.

Alohci
+2  A: 

It's important to use labels with the 'for' attribute for screen readers (for usability).

That is why I use fieldsets

Dan dot net
1. The for attribute also provides usability improvements for graphical clients.2. Fieldsets are not required for label[for].3. Using tables does not preclude using fieldsets.
eyelidlessness
+4  A: 

A form isn't tabular data.

It's so easy to lay out form elements with CSS, I don't see any value worth obfuscating the markup with tables. Personally, I find that laying out forms with CSS is easier than using tables at this point. For example:

HTML:

<fieldset>
  <label for="FirstName">First Name</label>
  <input type="text" id="FirstName" />

  <label for="LastName">Last Name</label>
  <input type="text" id="LastName" />

  <label for="Age">Age:</label>
  <select id="Age">
    <option>18-24</option>
    <option>25-50</option>
    <option>51-old</option>
  </select>
</fieldset>

CSS:

fieldset {
  overflow: hidden;
  width: 400px;
}

label {
  clear: both;
  float: right;
  padding-right: 10px;
  width: 100px;
}

input, select {
  float: left;
}

Using simple variations on that theme, you can make great-looking, accessible forms that are actually easier to work with than tables anyway. I've used that basic approach and ramped it up to some fairly complex, multi-column data entry forms too, no sweat.

Dave Ward
+ 1 for semantic HTML.
Residuum
A form *is* tabular. And form fields represent variable data.
eyelidlessness