html给表单分组怎么设置,关于html：对表单元素进行分组的最正确方法是什么？...

，根本没有用于此目的的标记(即没有标记标记，只有CSS)。

除了行表格格式不佳外，表格在行格式需要变化时也不是很灵活。而且br似乎是一个可怕的想法(即使我在教程中也看到过)。我已经在使用fieldset来创建表单中字段的逻辑分组，但是如果在语义上比div更正确，那么我总是可以使用两个不同的类。奇怪的是ul方法很常见...外面的fieldset对多个字段进行分组，为什么我需要同时对它们进行分组的ul？

我真的很喜欢这种设计中标记的简单性：http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html。但是我很难适应CSS以处理更复杂的字段，例如在逻辑上属于一起的选择和输入。

因此，在此示例中，我在下面的字段＃1和字段＃2周围包裹了什么(如果有的话)？

Group 1

Name

Old Name

Favorite Food

Pizza

Tacos

Other

Pizza

Group 2

什么是最容易使用的表单布局控制方法，什么是最正确的语义方法？我是否有幸使它们成为一模一样的东西？

如果您还没有看到Twitter Bootstrap处理表单的方式，那么值得一看：twitter.github.com/bootstrap/#forms。 请记住，这将在Bootstrap的版本2中更改。

只需使用div。 coding.smashingmagazine.com/2011/11/11/

@Jcubed如果禁用CSS，那么div方法似乎具有使表单可读的附加值。

没有一种在语义上标记表单的正确方法。有些方法比其他方法更灵活，但这并不意味着您应该一直选择它们。有时，最好使用一些快速标记。

为了提高灵活性，我通常使用如下结构：

Label Text

另外，为帮助CSS样式，我可以使用多个标签：

Label Text

Label Text

但是我可以将其分成一个列表：

Label Text

Label Text

我发现添加更多的通用结构元素和类往往会在一定程度上增加灵活性，但是，如果您只想要mad-lib形式，则不需要任何结构：

Hi, my

name

is

and I would like to request a copy of

Super Awesome Newsletter

Even more awesome-er newsletter

Lorem Ipsum weekly

please send it to

最后，语义围绕您希望表格的阅读方式展开。不幸的是，这意味着如果进行了重大更改，则将重组表格。

仅当您只有一个与字段/显示行关联的输入时，第一种方法才是标签的子级。您为什么要使用标签来辅助表示明显不是第二个示例中的标签的元素？

@BrianMcFarland，我通常在周围的上添加[title]，我在示例中似乎已经忘记了它，但是更重要的是，您可以使用它来使元素自动调整其大小像display: block;这样的容器。由于元素的存在，因此单击的可访问性不会丢失，就像使用或时一样。

是否存在由引起的可访问性问题？我相信for属性可用于在单击标签时将焦点对准任何元素，除非糟糕的浏览器存在问题。

@BrianMcFarland，如果从删除所有样式并将其设置为具有100%宽度和高度，则可以设置label样式以使其看起来像文本字段。如果使用div，并且有人单击div，则输入元素不会获得焦点，但是如果使用label，它将把焦点发送到输入元素。这对于获得一致的跨浏览器样式或宽度可变的输入元素非常有帮助。

猜猜我明白您现在单击div的意思。示例：jsfiddle.net/6CyTv。仍然无法掌握它们如何以不同的方式缩放，或者为什么您不只是设置样式。

@BrianMcFarland，它有助于设计填充容器的灵活输入区域，同时保持边界，边距和填充。如果您打算使用[size]设置静态宽度表单字段，则此方法会过大。我认为它是Web开发工具箱中的许多工具之一，但是您必须使用正确的工具来完成正确的工作。

我刚刚了解了为什么对标签进行样式设置会导致容器溢出。这让我想哭。好，谢谢您的翔实评论！

"在语义上正确"适用于HTML，而不适用于CSS，我想您已经涵盖了这一点。

当然，可以使用多种方式来设置表单的样式，但是您可以在不添加任何额外标记的情况下做的一件事就是将标签设置为一个"列"，并将输入为另一个：

label {

display: block;

float: left;

clear: left;

width: 150px;

}

input, select {

display: block;

float: left;

width: 150px;

}

http://jsfiddle.net/mblase75/ECmwH/

这留下了在何处显示" oldVal"字段的问题，但是我认为这是一个见解。

Copyright ©  码农家园