Question

我正在构建一个使用标签来定义输入值的表单（尽可能多）。

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

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

修改

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

Answer 1

我认为您应该使用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 2

以下是规范：

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

它说：

可以指定for属性以指示表单控件   哪个标题是关联的。如果指定了属性，   属性的值必须是可绑定表单关联的ID   与label元素在同一Document中的元素。如果属性是   指定并且Document中有一个ID等于的元素   ＆gt; for属性的值，第一个这样的元素是a   labelable form-associated＆gt; element，那个元素就是标签   元素的标记控制。

如果未指定for属性，但label元素有   labelable形式相关元素后代，然后第一个这样   树序中的后代是标签元素的标记控件。

因此，您必须提供for属性。但是，如果您的表单控件具有相同的ID，则可能就是这种情况。情况并非如此。
否则，您可以使用标签包围代码，但是您的元素必须是可标记的。

可弹性元素是：

可弹性元素
  表示可与标签关联的元素   元件。

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

因此标签没有机会在您的案例中具有此特定行为

使用fieldset和legend

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

Answer 3

只需使用此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 4

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>

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

修改

4 个答案: