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

Question

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

Answer 1

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

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

Answer 2

我认为,使用优秀的HTML和CSS很好地布局表单是很困难的.CSS为您提供的布局控制级别远远超出任何笨重的基于表格的布局.这不是一个新想法,正如2006年Smashing Magazine的文章所示.

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

.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提供了足够的工具来布置表格,无论你喜欢什么.

Answer 3

如果您只需要简单的行列夹点类型布局，那么使用表格就不会感到内。我不知道有人会因为不是CSS而称其为“不良设计”。我见过许多基于CSS的糟糕设计。我喜欢CSS，并且认为CSS在许多方面都比传统的嵌套表布局优越，但是可以做到最好，最容易维护，并做出更重要，更具影响力的决策。