html - 表单:您的 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 重用，我发现自己添加了额外的标记。在我读过的一些书中，我听说标记越少越好(虽然这条线对我来说很真实，但它可能非常灰色)。例如，我完全可以使用前面 block 中的标记并向 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/

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

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