对表单元素进行分组的最正确方法是什么？

Question

所以我看过很多教程，但仍然没有对这个问题提出一个有凝聚力的答案：标记表单的正确/最佳方法是什么，其中我有一个由标签、控件组成的元素的逻辑分组（输入或选择），以及以前的值，即单个字段？

我希望 CSS 布局将每个分组放在新的水平线上。

我见过<div> 包装器、<br> 标签、<ul>、<fieldset>、<tr>，并且没有任何东西（即没有标记标签，只有 CSS）用于此目的。

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

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

那么在这个例子中，我在下面的字段 #1 和字段 #2 周围加上什么（如果有的话）？

<form .....>
  <fieldset> <legend>Group 1</legend>

    <!-- 'field #1' -->
    <label for="newName">Name</label>
    <input type="text" id="newName">
    <!-- oldVal Filled in with Javascript or server-side script -->
    <span class="oldVal" id="oldName">Old Name</span>

    <!-- 'field #2' -->
    <label for="newFood">Favorite Food</label>
    <select id="newFood">
      <option value="pizza">Pizza</option>
      <option value="tacos">Tacos</option>
      <option value="other">Other</option>
    </select>
    <input type="text" id="newFoodOther"> <!-- type here when 'other' is selected -->
    <span class="oldVal" id="oldFood">Pizza</span>

  </fieldset>
  <fieldset> <legend> Group 2</legend>
    <!-- more fields here -->
  </fieldset>
</form>

控制表单布局最容易使用的是什么，语义上最正确的是什么？我是否有幸拥有这些相同的东西？

Answer 1

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

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

<form>
    <fieldset>
        <legend></legend> <!-- optional -->
        <label>
            <span>Label Text</span>
            <input type="..." />
        </label>
        <!-- repeat -->
        <input type="submit" ... />
    </fieldset>
</form>

或者，为了帮助使用 CSS 进行样式设置，我可能会使用多个标签：

<form>
    <fieldset>
        <label for="some-id-0">Label Text</label>
        <label class="text-label">
            <input type="text" id="some-id-0" />
        </label>
        <label for="some-id-1">Label Text</label>
        <label class="password-label">
            <input type="password" id="some-id-1" />
        </label>
    </fieldset>
</form>

但是我可以把它分成一个列表：

<form>
    <fieldset>
        <dl>
            <dt>
                <label for="some-id-0">Label Text</label>
            </dt>
            <dd>
                <label class="text-label">
                    <input type="text" id="some-id-0" />
                </label>
            </dd>
            <dt>
                <label for="some-id-1">Label Text</label>
            </dt>
            <dd>
                <label class="password-label">
                    <input type="password" id="some-id-1" />
                </label>
            </dd>
        </dl>
    </fieldset>
</form>

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

<form>
    <p>
        Hi, my
        <label for="fullName">name</label>
        is
        <input type="text" id="fullName" name="fullName" placeholder="Full name" />
        and I would like to request a copy of
        <select id="publication" name="publication">
            <option>Super Awesome Newsletter</option>
            <option>Even more awesome-er newsletter</option>
            <option>Lorem Ipsum weekly</option>
        </select>
        please send it to
        <input type="temail" id="email" name="email" placeholder="email@example.com" />
    </p>
    <input type="submit" value="Thank you!" />
</form>

最后，语义围绕着您希望如何阅读表单。不幸的是，如果进行了重大更改，这意味着要重新构建表单。

Answer 2

“语义正确”适用于 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”字段的问题，但我认为这是一个见仁见智的问题。