Is it acceptable to use tables for forms? Or is it still more correct to use divs?

Question

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

Answer 1

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.

Answer 2

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

Here's a code example. Note that the labels' for attribute lets you click that label to move focus to the input specified (it matches the id attribute).

<form>
  <fieldset>
    <legend>Wombat Statistics</legend>
    <ol>
      <li>
        <label for="punchstrength">Punch Strength</label>
        <input id="punchstrength" name="punchstrength" />
      </li>
      <li>
        <label for="beverage">Favorite Beverage</label>
        <input id="beverage" name="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" name="creditcard" />
      </li>
      <li>
        <label for="gullibility">Did you actually fill that in?</label>
        <input id="gullibility" name="gullibility" />
      </li>
    </ol>
  </fieldset>
</form>

For a basic layout, you can use something like:

label, input, textarea, select { 
  display: inline-block; vertical-align: top; width: 30%; 
}

See this article for a more in-depth tutorial.

Answer 3

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....

Answer 4

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>

Answer 5

You can use tables. Simple as that.

Answer 6

I never understood why you would use an ordered or unordered list for forms when a definition list seems more semantically appropriate:

<fieldset>
  <dl>
    <dt><label for="definition">Definition:</label></dt>
    <dd><input type="text" name="definition" /></dd>
  </dl>
</fieldset>

They can be a wee bit trickier to wrangle format-wise, but it always made a lot more sense to me than lists or tables for the vast majority of forms.

Having said that, tables don't seem inappropriate to me for editable tabular data.