在html中显示表单时使用表标签是不好的设计？

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

题

我一直听说div标签应该用于布局目的而不是table标签。那么这也适用于表单布局吗？我知道表单布局仍然是一个布局，但似乎创建表单布局html s需要更多css和<=>。那么考虑到这一点，表格布局应该使用<=>标签吗？

有帮助吗？

解决方案

是的，它确实适用于表单布局。请记住，还有像FIELDSET和LABEL这样的标签，专门用于向表单添加结构，因此它不仅仅是使用DIV的问题。您应该能够使用非常小的HTML标记表单，并让CSS完成剩下的工作。 E.g：

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>

其他提示

我认为这是一个神话，形式是<！>“难以<！>”;用良好的HTML和CSS很好地布局。 CSS为您提供的布局控制级别远远超出任何笨重的基于表格的布局。这不是一个新想法，如这个粉碎杂志文章从2006年开始显示。

我倾向于在表单中使用以下标记的变体。我的CSS中有一个通用的.form风格，然后是文本输入，复选框，选择，文本等等的变体。

.field label {
  float: left;
  width: 20%;
}

.field.text input {
  width: 75%;
  margin-left: 2%;
  padding: 3px;
}
<div class="field text">
  <label for="fieldName">Field Title</label>
  <input value="input value" type="text" name="fieldName" id="fieldName" />
</div>

表不是邪恶的。当需要显示表格数据时，它们是目前最好的选择。表格恕我直言不是表格数据 - 它们是表格，而CSS提供了足够的工具来布置表格，无论你喜欢什么。

如果您只需要一个简单的行列夹式布局，您不应该对使用表感到内疚。我不知道有人可以称之为“糟糕的设计”只是因为它不是CSS。我见过很多糟糕的基于CSS的设计。我喜欢CSS并且认为它在许多方面远远优于传统的嵌套表格布局，但做有效的工作和最容易维护的东西，并转向更重要，更有影响力的决策。

一般原则是，您希望使用任何最能传达您想要的语义内容的HTML元素，然后依靠css直观地表示该语义内容。遵循该原则可以获得许多内在的好处，包括更容易的站点一般视觉变化，搜索引擎优化，多设备布局和可访问性。

所以，简短的回答是：你可以做任何你想做的事情，但最佳实践建议你只使用表格标签来表示表格数据，而是使用任何html标签来表达你想要表达的内容。最初可能会有点困难，但是一旦你习惯了这个想法，你就会想知道为什么你会以任何其他方式做到这一点。

根据您尝试对表单执行的操作，使用语义标记和css不应该使用更多标记，尤其是如果您依赖于css的级联属性。此外，如果您的站点中的许多页面上有多个相同的表单，则语义方法在编码和维护方面都更有效。

为了使表单尽可能可访问且语义正确，我使用以下格式：

  <fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
  </fieldset>

我主要使用CSS，直到CSS变成拖动。例如，使用表而不是css创建3+列（3组标签+表单字段）形式要容易得多。我无法使用纯css在所有主流浏览器中正确显示布局，而且我花了太多时间让它工作。所以我说拧了它，我用表很容易做到了。表格还不错。

这是一个灰色区域。并非标记中的所有内容都有明确的界限，这是您可以使用个人偏好并进行判断调用的一种情况。它不太符合数据组织的想法，但细胞是跨多个轴相关的，这是我用来判断某些东西是否适合表格的经验法则。

使用table而不是div来布置表格当然更容易，但要记住，表格应该是有意义的 - 它以常规方式呈现数据供用户查看，而不仅仅是将框放在屏幕上给定的订单。通常，我认为表单布局应该使用div来决定表单元素的显示方式。

如果您选择了一个表来布局表单（左侧是标签，右侧的字段，如其中一个答案中所述），那么我通常不会在这些表单布局问题中讨论过的一件事情。那个布局是固定的。在工作中，我们最近不得不用阿拉伯语快速“概念验证”我们的网络应用程序。使用表格进行表单布局的应用程序基本上卡住了，而我能够通过更改CSS文件中的大约十行来反转所有表单字段和标签的顺序。

如果您的表单以表格格式排列（例如，左侧的标签和右侧的字段），则表示是，请使用表格标签。

表单不是<！> quot; presentation <！>“;，您要求提供数据，您通常不会提供数据。我在表格数据中使用了大量的内联编辑。显然，当从表示切换到输入时，我使用数据中心 - td作为输入元素的持有者。

我在这里看到的大部分答案似乎都合适。我要添加的唯一内容，特别是对无动于衷的人或马特先生来说，就是使用<dl>/<dt>/<dd>。我相信这些代表了语义列表。

<dl>
  <dt><label for="nameTextBox">Name:</label></dt>
  <dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>

你可能想要重新设计这些，但这在语义上说是发生了什么，那就是你有一个<！> quot; terms <！>的列表; （<dt>）和<！>“;定义<！>”; （<dd>），术语是标签，定义是用户输入的值。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top