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

Question

我一直在使用formtastic来在rails应用程序上生成HTML表单.然而,我的问题实际上与HTML有关.

今天我在formtastic生成复选框(:booleanformtastic lingo上的类型字段)的路上发现了一个奇怪的行为.

其余字段(非复选框)以这种方式生成:

<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属性,使标记更简单.当a <input>在a中时<label>,它们之间的连接是隐式的.(参见HTML4第17.9.1节.)

但是,实际上这在IE中不起作用,所以你失去了这种潜在的优势.

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