12

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

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

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

<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>标签内可能是个好主意，而不是像文本框一样将它们放在外面？

4

3 回答 3

12

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

Email address: [____________________]

或输入上方的标签：

Email address:
[___________________________________]

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

[x] Accept terms and conditions

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

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

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

于 2010-04-27T11:44:04.897 回答
7

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

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

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

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

于 2010-04-27T11:39:36.207 回答
4

除了其他答案中提到的原因之外，如果<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/

于 2012-10-31T23:39:09.670 回答