尝试字段集

Question

我想知道将table用于表单是否可以接受。

严格来说，名称/值对是表格数据，不是吗？表单只是一组用户可自定义的名称/值对。那么在这种情况下使用table是正确的吗？或者我应该使用CSS样式div？

Answer 1

尝试字段集

我更喜欢将字段拆分为逻辑<fieldset>，每个字段<legend>，因为：

代码不那么混乱
默认格式是用户友好的（我特别喜欢图例的显示方式）
使用CSS轻松设置样式

这是一个代码示例。请注意，标签的for属性允许您单击该标签以将焦点移动到指定的输入（它与id属性匹配）。

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

对于基本布局，您可以使用以下内容：

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

有关更深入的教程，请参阅this article。

Answer 2

两者都正确。

我喜欢使用一些div / li，因为这样我可以制作一些不同的布局，但tables forms并不令人满意。

实际上，默认情况下，Django会为您提供表格格式。

Answer 3

表单不是表格数据。

使用CSS布置表单元素非常容易，我没有看到任何值得用表格来混淆标记的值。就个人而言，我发现使用CSS布局表单更容易比此时使用表格更容易。例如：

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;
}

使用该主题的简单变体，您可以制作外观漂亮，易于访问的表单，这些表单实际上比表格更容易使用。我已经使用了这种基本方法，并将其扩展到一些相当复杂的多列数据输入表单，没有任何问题。

Answer 4

您可以使用表格。就这么简单。

Answer 5

是

是的，您可以使用表格。 Div应该替换页面级布局的表，但不能替换表。在解决问题时，请继续在页面中使用它们。

Answer 6

在成为最大的反桌人之后，你可以想象我最终开始意识到这无所谓。使用最快的。当然，如果你正在嵌套表，那么你有一个问题，但通常我想不出一种更简单的方法来布局表单。在一天结束时，客户或访客是否会对您是否使用表格或列表提出两个问题？

Answer 7

Eric，我同意你的观点，表单数据是表格数据，语义上可以存在于表格中。

这是我用于简单数据输入屏幕的方法。

我一般不会使用div，但可能是有序列表

<ol>...</ol>

因为表单也是一个有序的项目列表。然而，我发现这种方法很难设计。

你可能会得到50/50的答案....

Answer 8

有些人会说是，有些人会说。

这是一种让您决定的方法：如果它真的包含表格数据，那么至少根据WCAG，它应该具有摘要属性。 summary属性应描述表的用途和结构，以使屏幕阅读器用户受益。你能写出这样的属性吗？如果是这样，那么你应该这样做，并把它包括在你的桌子上。如果你不能，那么它可能不是一个真正的桌子，你应该寻找另一种方式来铺设你的表格。

Answer 9

如果您正在寻找“css纯度”，您应该使用以下内容：

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

你可以用任何你想要的东西，它只是一个制作html表单布局的新标准，它有点像规则不使用表标签进行设计，但是仍然可以使用表来显示数据表（网格）

Answer 11

为屏幕阅读器使用带有“for”属性的标签非常重要（可用性）。

这就是我使用fieldsets

的原因

Answer 12

我从来不明白为什么当定义列表在语义上更合适时你会使用有序或无序的表单：

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

对于格式化来说，它们可能有点棘手，但对于绝大多数表单而言，它总是比列表或表格更有意义。

话虽如此，对于我来说，表格对于可编辑的表格数据似乎并不合适。

Answer 13

表格可以是表格式，也可以表格表格，但表格意味着“表达”以及语义。在表格中标记表单往往会将设计锁定为2跨，字段/输入布局（假设您不想花时间覆盖表格的CSS）。此外，如果您尝试使用移动电话等小屏幕，则必须覆盖样式。

此外，屏幕阅读器会过度宣布此表单，“第1行，第1列，标签，'名称'，第2列，输入，'名称'......”而不是简单地说，“输入，'姓名'......”

我的建议是使用DIV，FIELDSET或UL / LI。这使得演示文稿掌握在CSS的手中，正是它所属的位置。

表格使用表格是否可以接受？或者使用div更正确吗？

13 个答案:

尝试字段集

是