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”字段的问题，但我认为这是一个意见问题。

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

2 个答案: