HTML - 使用标签对复选框进行编码的正确方法

Question

我一直在使用 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> 中包含复选框标签可能是个好主意，而不是像文本框一样将它们放在外面？

Answer 1

文本输入的通用 UI 是左侧的标签:

Email address: [____________________]

或者输入上方的标签:

Email address:
[___________________________________]

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

[x] Accept terms and conditions

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

在第三个示例(复选框)中，文本出现在标签之后，同样，通过将标签放在标记顺序中的正确位置(在输入之后)，CSS 得到了极大的简化。

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