Question

在我当前的项目中，我们永久禁用了表单控件。在这些情况下，服务器端的form元素将替换为span元素。

这将创建如下代码：

<label for="foo">Foo</label>
<span id="foo">Bar</span>

问题1 ：是否可以接受一个label元素且没有任何关联的表单元素（input，select，textarea）？

问题2 ：如果是，在这种情况下，我们是否必须删除for属性（因为它引用的不是表单元素）？

规范说：

可以指定for属性以指示与标题相关联的表单控件。如果指定了属性，则该属性的值必须是与label元素在同一Document中与可标签的表单关联元素的ID。

https://www.w3.org/TR/2011/WD-html5-author-20110705/the-label-element.html

附加说明：在上面的引用中，可标记的与表单相关的元素到底是什么？

Answer 1

Question 1: Yes, you may use a label without an associated form element. The spec notes that a label can be associated with a form element, or contain the element within itself, but does not specify that either is required.

A label is expected to be used where phrasing content is expected. This means:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level.

Question 2: Yes, you will need to remove the "for" attribute to be technically valid. From the spec:

If the attribute is specified, the attribute's value must be the ID of a labelable form-associated element in the same Document as the label element.

Since you do not have a form-labelable element, the value cannot be the ID of it, and therefore must not be specified.

To address your clarification:

From the spec, a labelable form-associated element is:

Labelable elements Denotes elements that can be associated with label elements.
button input (if the type attribute is not in the hidden state) keygen meter output progress select textarea

Answer 2

正如规范本身所说的

可以指定for属性以指示与标题相关联的表单控件。如果指定了属性，则该属性的值必须是与label元素在同一Document中与可标签的表单关联元素的ID。

可以指定for属性，这意味着它是完全可选的。

可标记的表单相关元素是指可以与标签相关联的任何表单元素。例如。标签元素对input type='submit/reset/button'无效。

然后为什么在标签上使用 for

好处是可点击区域更大。在为标签指定for属性时，单击标签区域的操作与单击与标签相关联的表单元素的操作相同。

希望这可以解决您的疑问！

Answer 3

如其中一条注释所引用的答案中所述，当不直接引用<span>元素时，应使用<label>标记代替<input>。否则在语义上是错误的。

正确：

<span>This is an image</span>
<img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />

不正确

<label for="epic-image">This is an image</label>
<img src ="https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" />

是否可以使用没有任何关联表单元素的标签？

3 个答案: