web-dev-qa-db-ja.com

<labels>で囲まれた入力チェックボックス

私は通常、チェックボックスとラジオボタンをそれぞれのラベルで囲む傾向があり、これが優れたUXプラクティスと見なされているかどうか疑問に思っていました。

長所短所 ？

私の主な理由の1つは、ラベルの外側にチェックボックス/ラジオボタンがある場合、主に配置に1つの要素のみを使用しているため、要素の配置に役立つことです。他のフォーム要素とのブロックステータスを維持するには、両方を親要素内にラップする必要があります。

formsaccessibilitycheckboxes
32
Pablo Rincon

チェックボックスの周りにラベルをラップします。これにより、ボタンのクリックがはるかに簡単になります。

ラベルがコントロールから分離している場合、それらの間にクリックできないギャップがしばしばあります。

<input id="click-me" name="click-me" type="checkbox"/>
<label for="click-me">
    Click me
</label>

mockup

download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム

コントロールの周りにラベルをラップすると、このギャップがなくなります。

<label for="no-click-me">
    <input id="no-click-me" name="no-click-me" type="checkbox"/>
    No, click me
</label>

mockup

bmmlソースをダウンロード

41
Bennett McElwee

両方をラップする4つの理由<input type=radio>および<input type=checkbox>内<label>。

  1. 使いやすさ：「ヒットゾーン」が大きい=優れています。
  2. スタイル設定：CSSカスケードで簡単に分離できるコンテキストを作成します。 input {width：X％;} label> input {width：auto;}
  3. この手法はW3C検証に合格します。
  4. 私がそれをしない正当な理由を考えることはできません。
9
user38073

これは最良の答えではないかもしれませんが、本質的に良いことでも悪いことでもないと思います。ただし、フォーム要素をlabelタグでラップする利点の1つは、スタイルシートを使用してクリック可能なオブジェクトの領域を大幅に拡大できることです。

アクセシビリティの目的で、要素をラベルタグでラップするだけでは必ずしも十分ではないことに注意してください。要素には常にIDを指定し、forタグでは常にlabel属性を使用する必要があります。一部のスクリーンリーダーは、ラベルがないとラベルをフォーム要素に正しくリンクしません。

それ以外はどちらにしてもいいと思います。

（この回答が本質的に技術的なものであった場合は謝罪しますが、私はデザイナーではなく開発者です。）

4
lunchmeat317

Html5リファレンスの関連セクションは次のとおりです。

https://html.spec.whatwg.org/multipage/forms.html#the-label-element

それは次のように述べています：

  • Label要素には、最大で1つの子孫input要素、button要素、select要素、またはtextarea要素を含めることができます。
  • Label要素のfor属性は、フォームコントロールを参照する必要があります。

したがって、単一のフォーム要素をラップすることができ、for属性を使用する場合はフォーム要素を参照する必要がありますが、属性を使用する必要はなく、ラップする必要もありません。

構造的な観点から、私はラベルを、実際には単なるラベルである別個の要素として考えることを好みます。両方を含める必要がある場合は、コンテナーdivを使用することをお勧めします。これにより、ラベルに含まれるフォーム要素を気にすることなく、一般的な方法でラベルのスタイルを設定できます。もちろん、基本的なフォーム要素はスタイリングを継承する傾向がないため、区別は主に学術的なものです。

3
Peter

入力の周りにラベルをラップしない理由の1つは、入力フィールドがラベルではないためです。意味的には、ラベル内に入力を入れることは意味がないと思います。その方法で使用することを意図していませんでした。

2
Ringo

ラベル内で入力をラップするときに発生する可能性がある唯一の問題は、入力の状態がtrue（チェックされている）の場合にラベルのスタイルを設定することです。通常、これはCSS input:checked + label-入力がネストされている場合は、JavaScriptを使用してラベルをスタイルする必要があります。

ここの例（ https://www.piccolino.com/collections/gliders ）は、フィルターメニューに色見本を表示し、ラベルを使用して背景画像、ホバー状態、アクティブ状態を表示します。入力は非表示になり、モデルデータのキャプチャにのみ使用されます。

また、クロスブラウザ、クリック、および上記のステートメントで指摘されたその他の問題を回避する方法のいくつかの良い例については、 Bootstrap を参照してください。

2
nathan

スクリーンリーダーの暗黙のラベルについては、このビデオを確認してください： https://youtu.be/F02AWoK9dXo 記事 http://usability.com.au/2013/04/accessible-forms-1 -labels-and-identification /

1
JBee

LABELタグ内のチェックボックスの折り返しは、IE8でも「ラベル」をクリックするとチェックボックスのクリックがトリガーされるため、適切なマークアップです。

それ以外の場合は、JavaScriptの回避策を使用して同じことを修正する必要があります。これは、Webサイトの追加コードです。

1
STEEL