I'm wondering whether it's acceptable to use table s 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 table s in this case? Or should I use div s styled with CSS?

---

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.

---

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.

---

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.

链接地址: http://www.djcxy.com/p/88186.html

上一篇: Colspan所有栏目

下一篇: 表格用于表单可以接受吗？ 还是使用div更加正确？