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

时间:2011-12-27 16:28:04

标签: html css forms

所以我看过许多教程,但仍然没有对这个问题提出一个有凝聚力的答案:标记表单的正确/最佳方法是什么?我有一个由标签,控件组成的逻辑分组元素(输入或选择)和先前的值,即单个字段?

我希望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>

最简单的方法是控制表单布局,哪种语义最正确?我是否有幸拥有那些一个人?

2 个答案:

答案 0 :(得分:2)

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

为了灵活性,我通常使用如下结构:

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

最后,语义围绕着您希望表单的读取方式。不幸的是,如果做出重大改变,这意味着重组表格。

答案 1 :(得分:0)

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