Question

我一直在使用formtastic来在rails应用程序上生成HTML表单。但是，我的问题与HTML有关。

今天我在formtastic生成复选框的方式上发现了一个奇怪的行为（在formtastic lingo上类型为: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>标签中包含复选框可能是一个好主意，而不是将它们放在外面，就像文本框一样？

Answer 1

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

Email address: [____________________]

或输入上方的标签：

Email address:
[___________________________________]

但是对于一个复选框，常用的UI是标签在输入后出现，如下所示：

[x] Accept terms and conditions

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

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

因此，复选框总是与其他输入不同。关于带有标签的复选框的包装，这只是个人偏好，虽然我认为由于复选框输入不同，在标签内输入使得更容易定位这些输入用于CSS样式，因为标记不同。

Answer 2

任何人都可以告诉我为什么在<label>标记中包含复选框可能是个好主意

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

然而，实际上这在IE中不起作用，所以你失去了这种潜在的优势。

我只能假设这是出于布局/造型的原因。

Answer 3

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

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

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

实例：http://jsfiddle.net/xKLrS/2/

HTML - 使用Label编码复选框的正确方法

3 个答案: