是否可以在表单的标签中使用标签？

Question

我正在构建一个表单，它使用标签来定义输入值（很多人都这样做）。

A sample of this form can be seen here.

然而，我的问题在于使用复选框和单选按钮之类的东西。虽然我想定义一组输入选项（比如性别），然后用“男性”和“女性”包围我的实际输入，但它似乎会导致冲突，特别是样式明智，因为它需要原始的 css 属性.

在标签中使用标签的最佳/正确方法是什么，其中第一个标签将定义一个整体区域，而后续标签仅用于定义特定输入？

编辑

我在上面演示的表单是我面临的问题的一个示例，但为了保持一致性，我计划在表单集合的多个（50 多个）页面中使用此表单样式，因此在可能的情况下，我尽量不针对 具体问题，而不是解决我网站上许多页面的问题。

Answer 1

只需使用这个 CSS

#formWrapper label[for=male], #formWrapper label[for=female] { color: red; } 

这将允许您通过直接的 CSS 更改这些标签。另一种选择是只使用包含 div。

<div class="form-item">
    <label>Gender</label>
    <div class="radios">
         <label for="male">Male</label><input type="radio" for="male"/>
         <label for="female">Female</label><input type="radio" for="female"/>
    </div>
</div>

Answer 2

我认为您应该改用fieldset 和legend 标签，例如

<fieldset>
   <legend>Gender</legend>

   <label for="male"><input type="radio" ... />male</label>
   <label for="female"><input type="radio" ... />female</label>
</fieldset>

fieldset 是用于对相关输入进行分组的逻辑容器，legend 表示字段集本身的介绍性标题。您的小提琴已更新：http://jsfiddle.net/zrqnT/4/

另请参阅：
http://dev.w3.org/html5/spec/single-page.html#the-fieldset-element
http://dev.w3.org/html5/spec/single-page.html#the-legend-element

Answer 3

Fabrizio 所说的可能有效，但我个人只会使用标题。您不必为表单使用表单元素。此外，就样式而言，使用普通的标题元素会为您提供更大的灵活性。

<div class="stage clear">
    <h3>Gender: <em>*</em></h3>
    <label for="male"><input type="radio" name="gender" id="male" value="m" class="required" role="input" aria-required="true" />male</label>
     <label for="female"><input type="radio" name="gender" id="female" value="f" class="required" role="input" aria-required="true" />female</label>
</div>

Answer 4

规格如下：

http://www.w3.org/TR/html5/forms.html#the-label-element

上面写着：

可以指定 for 属性来指示表单控件 要关联的标题。如果指定了属性， 该属性的值必须是可标记表单关联的 ID 元素在与标签元素相同的文档中。如果属性是 指定并且 Document 中有一个元素的 ID 等于 for 属性的 > 值，第一个这样的元素是 labelable form-associated > 元素，那么那个元素就是标签 元素的标签控件。

如果没有指定for属性，但是label元素有一个 可标记的表单相关元素后代，然后是第一个这样的 树序的后代是标签元素的标签控件。

因此，您必须提供一个 for 属性。但是，如果您有一个具有相同 id 的表单控件，则可能会出现这种情况。这里不是这样。
否则，您可以用标签包围您的代码，但是您的元素必须是可标记的。

标签元素是：

可标记元素
表示可以与标签关联的元素 元素。

按钮输入（如果type属性不处于隐藏状态）keygen 仪表输出进度选择文本区域

因此，标签没有机会在您的情况下具有这种特定行为

改用字段集和图例

<fieldset>
    <legend>Gender: <em>*</em></legend>
    <label for="male"><input type="radio" name="gender" id="male" value="m" class="required" role="input" aria-required="true" />male</label>
    <label for="female"><input type="radio" name="gender" id="female" value="f" class="required" role="input" aria-required="true" />female</label>
</fieldset>