HTML - 使用标签编码复选框的正确方法答案

【问题标题】：HTML - Correct way of coding a checkbox with a LabelHTML - 使用标签编码复选框的正确方法
【发布时间】：2011-02-12 19:24:27
【问题描述】：

我一直在使用formtastic 在rails 应用程序上生成HTML 表单。然而，我的问题确实与 HTML 相关。

今天我在 formtastic 生成复选框的方式上发现了一个奇怪的行为（在 formtastic 术语中 :boolean 类型的字段）。

其余字段（非复选框）以这种方式生成：

<li>
  <label for="my_textbox_field">My TextBox</label>
  <input id="my_textbox_field" type="text" ... >
</li>

然而，复选框完全包含在它们的 <label> 标记中 - 像这样：

<li>
  <label for="my_boolean_field">
    <input id="my_boolean_field" type="checkbox" ... >
    This is my boolean field
  </label>
</li>

Formtastic 哲学似乎基于Learning to Love Forms 演示文稿。实际上，在该演示文稿的幻灯片 36 上，建议将这种结构用于复选框。我猜在演示文稿本身中，演示者解释了这样做的原因，但它没有写在幻灯片上。

谁能告诉我为什么在 <label> 标记中包含复选框可能是个好主意，而不是像文本框那样将它们放在外面？

【问题讨论】：

【解决方案1】：

除了其他答案中提到的原因之外，如果 <label> 和 <input> 是分开的，它们之间的任何空格都将是不可点击的。这可能不是你想要的。例如，此代码中的换行符将导致不可点击的空白：

<input id="my_boolean_field" type="checkbox" ... >    
<label for="my_boolean_field">This is my boolean field</label>

将<input> 嵌套在<label> 内可以避免这种情况，因为空格是标签的一部分。

【讨论】：

【解决方案2】：

文本输入的常见 UI 是左侧的标签：

Email address: [____________________]

或者输入上面的标签：

Email address:
[___________________________________]

然而，对于复选框，常见的 UI 是标签出现在输入之后，如下所示：

[x] Accept terms and conditions

对于前两种情况，如果标签位于标记中的输入之前，它会大大简化您必须创建的 CSS。有人可能会争辩说标签仍然可以环绕输入，但这里重要的是文本位于输入之前。

在第三个示例（复选框）中，文本位于标签之后，再次通过将标签放在标记顺序中的正确位置（在输入之后）大大简化了 CSS。

因此，复选框总是与其他输入不同。关于用标签包装复选框，这只是个人喜好，尽管我认为由于复选框输入不同，因此在标签内输入可以更容易定位这些输入用于使用 CSS 进行样式设置，因为标记不同。

【讨论】：

嘿，我得到了来自formtastic的家伙的回答！现在更有意义了，谢谢。只是想知道，是否有一个表单选项来控制这种行为（即将输入放在标签之后，而不是放在里面）？
没有。具有讽刺意味的是，在过去的 24 小时内，我被要求提出同样的要求（将复选框移出标签的偏好）以及将所有输入移到标签内。基本上，这都只是代码风格和个人喜好，我真的不想在这个时候给代码添加那种复杂性。长期计划（我希望）是您将能够通过渲染引擎或局部或其他东西自定义所有内容的标记。
好的！再次感谢您的回答。我会继续监控你的精彩项目（我已经在生产中使用它 - 非常酷！）

【解决方案3】：

谁能告诉我为什么在他们的<label> 标签中包含复选框可能是个好主意

可能是个好主意，因为在这种情况下您可能会丢失id 和for 属性，从而使标记更简单。当<input> 在<label> 中时，它们之间的连接是隐式的。（参见 HTML4 第 17.9.1 节。）

但是，实际上这在 IE 中不起作用，因此您失去了潜在的优势。

我只能假设在这种情况下这是出于布局/样式的原因。

【讨论】：