HTML - 使用标签对复选框进行编码的正确方法 [英] HTML - Correct way of coding a checkbox with a Label

问题描述

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

今天，我在formtastic生成复选框（类型为：boolean类型的字段）的路上发现了一个奇怪的行为。

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

 < li> 
< label for =my_textbox_field>我的文本框< / label> 
< input id =my_textbox_fieldtype =text...> 
< / li> 
  

但是，复选框包含在< label> 完全标记 - 像这样：

 < li> 
< label for =my_boolean_field> 
< input id =my_boolean_fieldtype =checkbox...> 
这是我的布尔字段
< / label> 
< / li> 
  

Formtastic哲学似乎基于学习爱表单演示文稿。实际上，在该演示的幻灯片36中，该结构被建议用于复选框。我猜在演示文稿中，演示者解释了为什么会这样做，但它没有写在幻灯片上。

任何人都可以告诉我为什么把复选框放在< label> 标记可能是一个好主意，而不是像文本框那样将它们放在外面？

pre $ 电子邮件地址：[/ p> ____________________]


或输入上面的标签：

 电子邮件地址：
 [___________________________________] 
  

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

  
 $ p 
 $ b 
对于前两种情况，它极大地简化了CSS如果标签出现在标记输入之前，您必须创建它。有人可能会争辩说，标签可以环绕输入，但重要的是文本在输入之前。
 
 
 
在第三个示例中（复选框） ，文本出现在标签之后，并且通过将标签放置在标记顺序的正确位置（输入之后），CSS大大简化了。 
 
 
所以，复选框总是与其余的输入不同。关于用标签包装复选框，这只是个人偏好，尽管我认为由于复选框输入不同，所以在标签内输入内容可以更容易地定位这些输入用于CSS样式，因为标记是不同的。
 
I've been using formtastic in order to generate HTML forms on rails applications. My question, however, is really HTML-related.

Today I found a strange behaviour on the way formtastic generates checkboxes (fields of type :boolean on formtastic lingo).

The rest of the fields (non-checkboxes) are generated this way:
<li>
  <label for="my_textbox_field">My TextBox</label>
  <input id="my_textbox_field" type="text" ... >
</li>
Checkboxes, however, are enclosed inside their <label> tags completely - like this:
<li>
  <label for="my_boolean_field">
    <input id="my_boolean_field" type="checkbox" ... >
    This is my boolean field
  </label>
</li>
Formtastic philosophy seems to be based on the Learning to Love Forms presentation. In effect, on slide 36 of that presentation this structure is suggested for checkboxes. I guess in the presentation itself the presenter explained why this was done, but it is not written on the slides.

Can anyone tell me why enclosing checkboxes inside their <label> tag might be a good idea, as opposed to putting them outside, like with textboxes?
解决方案
The common UI for a text input is either a label on the left:
Email address: [____________________]
Or the label above the input:
Email address:
[___________________________________]
For a checkbox however, the common UI is for the label to appear after the input, like this:
[x] Accept terms and conditions
For the first two cases, it drastically simplifies the CSS you have to create if the label comes before the input in the markup. One could argue that the label could wrap around the input still, but the important thing here is that the text comes before the input.

In the third example (the checkbox), the text comes after the label, and again, the CSS is greatly simplified by putting the label in the right place in the markup order (after the input).

So, the checkboxes were always going to be different to the rest of the inputs. In regards to the wrapping of the checkbox with a label, this was just a personal preference, although I'd argue that since the checkbox inputs are different, having the input inside the label makes it easier to target these inputs for styling with CSS, because the markup is different.

                        
这篇关于HTML  - 使用标签对复选框进行编码的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！