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

Question

所以我看了很多教程，但仍然没有对这个问题给出一个统一的答案:What's the correct/best way to mark an form where I have a logical grouping of elements consisting of a label, control (输入或选择)，以及先前的值，即单个字段？

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

我看过 <div> wrapper ，<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

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

为了灵 active ，我通常使用如下结构:

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

我发现添加更多通用结构元素和类往往会在一定程度上增加灵 active ，但是如果您只是想要一个 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>

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