表单：您的 CSS 是否适应您的标记，反之亦然？

Question

关于 html 表单，一个非常常见的标记模式是：

<form ...>
  <p>
    <label>Name:</label>
    <input .../>
  </p>
  <p>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

您通常会提供多少标记（类等）以实现表单最灵活的可视化格式？也就是说，您添加了多少标记来帮助您的 css 选择器，您是否使用通用选择器？

<form ...>
  <p class='name'>
    <label>Name:</label>
    <input .../>
  </p>
  <p class='birthdate'>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

对比

<form class='person' ...>
  <p class='name string'>
    <label>Name:</label>
    <input .../>
  </p>
  <p class='birthdate date'>
    <label>Birthdate:</label>
    <input .../>
  </p>
  ..
  <input type=submit/>
</form>

在第二种情况下，直接从数据库添加泛型类型（“日期”）可以更轻松地统一格式化日期字段。包装一个分组（“人”）以显示字段来自的模型也可以提供帮助。 （或者我可以使用内部 DIV。）然而，为了增加 css 重用，我发现自己添加了额外的标记。在我读过的一些书中，我听说标记越少越好（尽管对我来说，那条线可能非常灰色）。例如，我可以很好地使用先前块之一中的标记并向 css 添加更多选择器。

您决定多少标记才有意义的原则是什么？或者在 css 端放多少？

另外，我知道我可以选择输入的名称，但由于这是一个嵌套元素，我失去了从外部包装器（“p”）控制格式的能力，这通常是我想要额外控制的地方。

Answer 1

我倾向于使用定义列表标签来设置表单样式。

<form>
  <dl>

    <dt><label for="name">Name:</label></dt>
    <dd><input name="name" /></dd>

    <dt><label for="birthdate">Birthdate:</label></dt>
    <dd><input name="birthdate" /></dd>

    ...
  </dl>
</form>

我也使用以下 CSS：

FORM DT {
   clear:both;
   width:33%;
   float:left;
   text-align:right;
}

FORM DD {
   float:left;
   width:66%;
   margin:0 0 0.5em 0.25em;
}

更多信息在这里：http://www.clagnut.com/blog/241/

标记很多，但效果一致且有效。

另一种可以接受的表单样式方法是使用表格。只需将表单视为“交互式表格数据”。

Answer 2

我不会使用<p> 标记来对标签及其字段进行分组，因为它不是段落。如果您对<fieldset> 没有其他用途，您可以在每个“行”中使用一个。如果您有三个生日输入，那么字段集是完全合适的。

Gavin 建议的定义列表不是一个坏主意，但它看起来确实是不必要的标记 - 您可以将标签和输入设置为正确的宽度并浮动它们。

添加包装类也是完全有效的——请记住，您不必在 CSS 中使用它们，它们无论如何都会添加语义层。在某些情况下，您甚至可以使用microformat。

您还可以使用属性选择器很好地设置输入样式：

input[type="text"], input[type="password"] {
  border: 1px solid #ccc;
  background: #fff;
}
input[type="submit"], input[type="reset"] {
  border: 1px solid #666;
  background: #ccc;
}

Answer 3

我会尽量减少 html 标记。

HTML 表单是最难将 html 和 css 保持在最低限度的事情，因为如果不向它们添加类（例如文本框到文本框等），很难针对所有浏览器中的所有各种输入进行定位。

如果该站点的所有表单都使用简单的文本框而不是其他任何东西，那么最小标记方法就可以了。但是，具有复杂标记的控件（例如 telerik RAD 控件）不能使用简单标记，并且通常需要额外的标记和类。

这些小技巧增加了标记，但也使 css 更干净，毫无疑问会使这些元素的样式更容易。

对于其他通用的html/css，我倾向于尽量少用class，比如

.Menu {}
.Menu li {}
.Menu li a {}

这种模式可以大量重复用于重复数据，并且可以使用非常少的 html 标记来制作和设计模板。

有时添加类和诸如此类是不可避免的，但我认为，如果您通常同时考虑 css 和 html，那么您最终应该得到光滑的标记。

从一个站点到另一个站点，我很少重复使用 CSS。它是如此快速和轻松地为您想要的任何样式敲击，重新设计现有皮肤以适应新网站通常不值得 IMO。

主要是使用 CSS，我倾向于将从以前的网站中学到的知识应用到新网站中，以使所有浏览器的编码变得容易:)

Answer 4

多年后，我到达了：

一个文本字段

必填字段

一个长字段（拉伸 100% 表单宽度）

随心所欲

此外，我还有两个可以应用的 CSS 类：

字段集 div { 明确：两者； } fieldset.block 标签{ 显示：块； 字体粗细：粗体； /* 字段上方的标签 */ } fieldset.aligned label:first-child { 宽度：20%； 向左飘浮; } fieldset.block .stretch 输入， fieldset.block .stretch 文本区域， fieldset.block .stretch 选择 { 宽度：100%； } fieldset.aligned .stretch 输入， fieldset.aligned .stretch 文本区域， fieldset.aligned .stretch 选择 { 宽度：79%； /* 为标签留出空间 */ }

Answer 5

我个人只是这样做：

<form>
    <label for="foo">Foo</label>
    <input type="text" id="foo" name="foo" />
    <br />
    <label for="foo2" class="block">Foo 2</label>
    <textarea id="foo2" name="foo2"></textarea>
    <br />

那么对于 css 来说，这取决于我是否希望元素与它内联

form label.block{
    display: block;
}

或者你可以像@DisgruntledGoat 写的那样阻止+浮动它们。 （我真的很讨厌额外的标记）