表单：您的 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

我不会使用

标签对标签及其字段进行分组，因为它不是段落。如果您对

没有其他用途，您可以为每“行”使用一个。如果您有三个生日输入，那么字段集是完全合适的。

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

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

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

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，我倾向于使用尽可能少的类，例如

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

这种模式可以多次重复使用重复的数据，并且可以用很少的html标记来制作和设计模板。

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

从一个站点到另一个站点，我很少重复使用 CSS。它是如此快速和容易地敲出任何你想要的风格，重新设计现有的皮肤以适应新的网站在我看来通常是不值得的。

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

Answer 4

多年后，我得到了：

<fieldset>
  <div>
    <label for="Whatever">A text field</label>
    <input type="text" id="Whatever" />
  </div>
  <div class="required">
    <label for="RequiredField">A required field</label>
    <input type="text" id="RequiredField" />
  </div>
  <div class="stretch">
    <label for="LongField">A long field (stretched across 100% form width)</label>
    <input type="text" id="LongField" />
  </div>
  <div class="cmd">
    <button type="submit">Do whatever</button>
  </div>
<fieldset>

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

fieldset div {
  clear: both;
}

fieldset.block label {
  display: block;
  font-weight: bold; /* labels above fields */
}

fieldset.aligned label:first-child {
  width: 20%;
  float: left;
}

fieldset.block .stretch input,
fieldset.block .stretch textarea,
fieldset.block .stretch select {
  width: 100%;
}

fieldset.aligned .stretch input,
fieldset.aligned .stretch textarea,
fieldset.aligned .stretch select {
  width: 79%; /* leave space for the label */
}

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写的那样阻止+浮动它们。 （我真的很讨厌额外的标记）