22

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

4

12 回答 12

23

是的，它确实适用于表单布局。请记住，还有专门用于向表单添加结构的标签，如 FIELDSET 和 LABEL，因此这并不是只使用 DIV 的问题。您应该能够使用非常少的 HTML 来标记表单，并让 CSS 完成其余的工作。例如：

<fieldset>
    <div>
         <label for="nameTextBox">Name:</label>
         <input id="nameTextBox" type="text" />
    </div>
    ...
</fieldset>
于 2008-09-20T21:41:21.160 回答
13

我认为表单“难以”以良好的 HTML 和 CSS 很好地布局是一个神话。CSS 为您提供的布局控制级别远远超出了任何笨拙的基于表格的布局。这不是一个新想法，正如2006 年Smashing Magazine 的这篇文章所示。

我倾向于在我的表单中使用以下标记的变体。我的 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 提供了足够多的工具来根据您的喜好布局表单。

于 2008-09-20T21:50:21.717 回答
5

如果您只需要一个简单的行列夹式布局，您不应该对使用表格感到内疚。我不知道任何人怎么能仅仅因为它不是 CSS 就称它为“糟糕的设计”。我见过很多糟糕的基于 CSS 的设计。我喜欢 CSS，并且认为它在许多方面都优于传统的嵌套表格布局，但要做最有效、最容易维护的事情，并做出更重要、更有影响力的决策。

于 2008-09-20T21:40:32.940 回答
3

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

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

根据您尝试对表单执行的操作，使用语义标记和 css 不需要太多标记，尤其是当您依赖 css 的级联属性时。此外，如果您在站点的许多页面中有多个相同的表单，那么语义方法会更加高效，无论是编码还是维护。

于 2008-09-20T21:41:55.807 回答
3

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

<fieldset>
  <ol>
    <li>
      <label for='text_field'>Text Field</label>
      <input type='text' name='text_field' id='text_field' />
    </li>
  </ol>
</fieldset>
于 2008-09-20T22:08:10.380 回答
3

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

于 2009-02-16T20:29:32.177 回答
2

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

于 2008-09-20T21:40:33.457 回答
1

使用 table 比 div 来布局表格肯定更容易，但请记住，表格应该意味着某些东西 - 它以常规方式呈现数据供用户查看，而不是以给定的顺序在屏幕上放置框. 一般来说，我认为表单布局应该使用 div 来决定表单元素的显示方式。

于 2008-09-20T21:32:42.150 回答
1

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

于 2008-09-20T23:18:27.120 回答
0

如果您的表单以表格格式布局（例如，左侧的标签和右侧的字段），那么可以，使用表格标签。

于 2008-09-20T21:45:20.590 回答
0

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

于 2008-09-20T21:54:45.513 回答
0

我在这里看到的大多数答案似乎都是合适的。我唯一要补充的是，特别是对于冷漠或马特先生的，是使用<dl>/<dt>/<dd>. 我相信这些在语义上代表了列表。

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

您可能想要重新设置这些样式，但这在语义上说明了发生了什么，即您有一个“术语”（<dt>）和“定义”（<dd>）的列表，其中术语是标签，定义是用户输入的值.

于 2008-09-21T03:51:49.383 回答