12

RailsアプリケーションでHTMLフォームを生成するためにformtasticを使用しています。ただし、私の質問は実際には HTML 関連です。

今日、formtastic がチェックボックス ( :booleanformtastic 用語のタイプのフィールド) を生成する方法で奇妙な動作を発見しました。

残りのフィールド (チェックボックス以外) は、次のように生成されます。

<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

最初の 2 つのケースでは、ラベルがマークアップの入力の前にある場合、作成する必要がある CSS が大幅に簡素化されます。ラベルが入力を囲むことができると主張する人もいるかもしれませんが、ここで重要なことは、テキストが入力の前に来るということです。

3 番目の例 (チェックボックス) では、テキストはラベルの後にあります。ここでも、マークアップ順序の適切な場所 (入力の後) にラベルを配置することで、CSS が大幅に簡素化されます。

そのため、チェックボックスは常に残りの入力とは異なります。チェックボックスをラベルでラッピングすることに関しては、これは単なる個人的な好みでしたが、チェックボックスの入力が異なるため、入力をラベル内に配置すると、これらの入力を CSS でスタイリングするためのターゲットにしやすくなると私は主張します。マークアップが違うからです。

于 2010-04-27T11:44:04.897 に答える
7

<label>タグ内でチェックボックスを囲むのが良いアイデアである理由を誰か教えてください

この場合、属性と属性が失われ、マークアップが単純になる可能性があるため、これは良い考えかもしれません。が 内にある場合、それらの間の接続は暗黙的です。(HTML4 セクション 17.9.1 を参照してください。)idfor<input><label>

ただし、実際にはこれは 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 に答える