6

关于 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”）控制格式的能力，这通常是我想要额外控制的地方。

4

5 回答 5

4

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

<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/

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

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

于 2009-09-16T11:07:41.563 回答
1

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

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

添加包装类也是完全有效的——请记住，您不必在 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;
}
于 2009-09-16T12:43:47.190 回答
0

我确实尝试将 html 标记保持在最低限度。

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

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

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

对于其他通用的 html/css，我倾向于使用尽可能少的类，比如

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

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

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

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

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

于 2009-09-15T18:24:29.933 回答
0

多年后，我到达了：

<字段集>
  <div>
    <label for="Whatever">一个文本字段</label>
    <input type="text" id="随便" />
  </div>
  <div class="必需">
    <label for="RequiredField">必填字段</label>
    <input type="text" id="RequiredField" />
  </div>
  <div class="拉伸">
    <label for="LongField">一个长字段（拉伸 100% 表单宽度）</label>
    <input type="text" id="LongField" />
  </div>
  <div class="cmd">
    <button type="submit">随心所欲</button>
  </div>
<字段集>

此外，我有两个可以应用的 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%；/* 为标签留出空间 */
}
于 2009-11-12T21:49:43.737 回答
-1

我个人只是这样做：

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

于 2009-09-17T23:17:44.227 回答