Question

通常我使用无序列表标签设置表单，例如

<fieldset>
    <ul>
        <li>
            <label for="txtName">Name</label>
            <input type="text" id="txtName" />
        </li>
    </ul>
</fieldset>

但是，我经常会看到使用<p>标记的标记，如下所示：

<fieldset>
    <p>
        <label for="txtName">Name</label>
        <input type="text" id="txtName" />
    </p>
</fieldset>

其中哪一个在语义上更正确？除了<p>风格更简洁之外，不同方法有任何优点或缺点吗？

编辑：在这里清楚地打开一堆虫子 - 更多选择，哇！ :) W3C在这里有推荐吗？

有趣的是，W3C建议似乎是最不优雅的解决方案：

<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">Chocolate</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">Cream Filled</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">Honey Glazed</label><br/>
  <input type="submit" value="Purchase Donuts"/>
</p>

遗憾的是，关于标记表单元素的最佳约定没有更强的指导。

Answer 1

在我看来，一组表单控件既不是列表项也不是段落。当我标记表单时，我通过将它们包装在<div> s中来分隔我的标签/输入组。如果您尝试在表单控件之间标记 div ，则不要害怕使用<div>。

<fieldset>
  <div class="field">
    <label for="txtName">Name</label>
    <input type="text" id="txtName" />
  </div>
  <div class="field">
    <label for="txtTitle">Title</label>
    <input type="text" id="txtTitle" />
  </div>
</fieldset>

根据您给出的示例，<p>可能会降低“更好”，因为如果CSS不可用，您将看不到项目旁边的项目符号，并且控件组可能间隔得相当好。

Answer 2

不要忘记定义清单：

<fieldset>
    <dl>
        <dt><label for="txtName">Name</label></dt>
        <dd><input type="text" id="txtName" /></dd>
    </dl>
</fieldset>

没有真正正确的答案。选择对您最有意义的标记。对我来说，表格不是无序列表。定义列表在我的脑海中更为接近。

Answer 3

通常，表单字段既不是段落也不是列表项，从语义上讲。如果您要求将表单字段组合在一起，<div> s可能是最合适的，但如果您只是在<label> / <input>对周围寻找容器，请考虑用于将标签与字段相关联的alternate method：

<fieldset>
    <label>Name <input type="text" id="txtName"/></label>
    <label>Location <input type="text" id="txtLocation"/></label>
</fieldset>

然后，您可以在没有人工包装的情况下对它们进行样式处理或操作（并且不必再担心for=）。

Answer 4

我倾向于使用有序列表

<fieldset>
<ol>
    <li>
        <label for="txtNameFirst">Name</label>
        <input type="text" id="txtNameFirst" />
    </li>
    <li>
        <label for="txtNameLast">Name</label>
        <input type="text" id="txtNameLast" />
    </li>
</ol>
</fieldset>

我使用有序列表的语义推理是，打印中的大量表单实际上是编号的，因此是表单输入的有序列表。

在语义上，我认为定义列表也包含水，并且它确实具有为每个标签/输入配对提供包装以及每个单独的标签和输入的额外好处，这可以为您提供大量的设计控制（如果你能忍受在每个标签/输入对周围缠绕DL的轻微苛刻的压力）

<fieldset>
    <dl>
        <dt><label for="txtNameFirst">Name</label></dt>
        <dd><input type="text" id="txtNameFirst" /></dd>
    </dl>
    <dl>
        <dt><label for="txtNameLast">Name</label></dt>
        <dd><input type="text" id="txtNameLast" /></dd>
    </dl>
</fieldset>

如果有序/无序/定义列表不是你的东西，那么我会选择div。他们唯一隐含的语义是“分裂”，因此他们可以胜任这项工作。

我很难证明使用段落（p）元素来包装标签/输入对，因为p元素的隐含语义在我看来并不适用。（另外，如果需要，保持p元素可以在表单中使用，以获得解释性文本很好）

Answer 5

W3C为表单提供的关键事项是，表单的设置方式可以轻松地以编程方式对标签和表单元素进行分组：

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

特别是HTML Technique 44: Using label elements和HTML Technique 71: Providing a description。

在列表项中包装每个标签和输入所带来的好处是，具有屏幕阅读器的用户可能会在开头有一些指示，列表中有x项，这可能很有用。

一般来说，虽然我们的设计师使用Zack - 我们的表单行包含在一个div中，带有一个“formrow”或类似的类。

Answer 6

我倾向于每<div>和<label>组合使用一个<input>，直到我得到一份新工作，其中规范是无序列表。我有一个同桌发誓的同事（一栏用于标签，一栏用于字段）声称它只是具有编辑功能的表格数据。

此时我认为作为无序列表的输入是最佳语义匹配，但正如您所注意到的，对该主题有很多意见。

Answer 7

WHATWG实际上认为表单的每个部分都是paragraph：

表单的每个部分都被视为一个段落，通常使用p元素将其与其他部分分开。

我不确定我是否同意这一点，但这似乎是对您可能遇到的问题的最“官方”回答。可悲的是我找不到任何解释。

Answer 8

如果您的表单内容总是包含

import Combine

class ViewModel: ObservableObject {
    @Published var myBoolState: Bool = false
}

class MyVC: UIViewController {
    let vm = ViewModel()
    
    private var subscribers = Set<AnyCancellable>()

    override func viewDidLoad() {
        super.viewDidLoad()

        vm.$myBoolState.sink { value in
            print(">> here it goes")
        }.store(in:&subscribers)
    }

    func createTheView() {
        let vc = UIHostingController(rootView: MySwiftUIView(vm: self.vm))
        self.navigationController!.pushViewController(vc, animated: true)
    }
}

struct MySwiftUIView: View {
    @ObservedObject var vm: ViewModel

    var body: some View {
          Button(action: {
            vm.myBoolState = true
          }) {
              Text("Push Me")
          }
    }
}

可以用一个来设置样式

<form id='theform'>
  <label for='item-1'>Name</label>
  <input id='item-1 type='text' name='name'>
  <label for='item-2'>Email</label>
  <input id='item-2 type='email' name='email'>
</form>

产生一个 100 像素宽的标签列和一个 200 像素宽的输入字段列。但它需要一个标签/输入或标签/选择的节奏，中间没有任何东西。

p与ol或ul形式造型

8 个答案: