<label>
、<div>
、などの形で物にラベルを付ける方法をたくさん見てきました<span>
。これには正しい答えと間違った答えがありますか? これらのいずれかに利点/欠点はありますか? ありがとうございました
4 に答える
ラベルはアクセシビリティに最適です (タブ オーダー、スクリーン リーダーなど)。
詳細については、http: //www.communitymx.com/content/article.cfm?cid=02310を参照してください。
私はこれを好む傾向があります:
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
Phil Haackの考えを見てみましょう...
フォーム要素にラベルを付ける適切な方法は、以下を使用すること<label>
です:
一部のフォーム コントロールには自動的に関連付けられたラベル (ボタンを押す) がありますが、ほとんどのフォーム コントロールには関連付けられていません (テキスト フィールド、チェックボックス、ラジオ ボタン、およびメニュー)。
暗黙的なラベルを持つコントロールの場合、ユーザー エージェントは
value
属性の値をラベル文字列として使用する必要があります。要素は、
<label>
暗黙的なラベルを持たないコントロールのラベルを指定するために使用されます
これはマークアップに意味を与えるセマンティック要素であるため、ユーザー エージェントはそれを理解して、ラベルのクリックを要素自体に誘導する傾向があります (チェックボックスのような小さなコントロールには非常に役立ちます)。また、スクリーン リーダーやその他のアクセシビリティ機能を使用している人々に役立つ支援を提供しています。
実際に要素にラベル<div>
を付けるためにorを使用しないでください。ただし、補助的なヘルプ テキストについては、役立つ場合があります。しかし、可能で賢明な場合は、HTML のセマンティック機能に固執する必要があります。これは私の目のようなケースです。<span>
最良の方法はこれです:
<label for="anInput">This is the input</label>
<input type="text" name="anInput" />
これは、チェックボックスにとって特に興味深いものです。ラベルをクリックすると、チェックボックスがオン/オフになります。入力フィールドのラベルをクリックすると、それが選択されます。
タグは、input 要素のラベルを定義します。
label 要素は、ユーザーにとって特別なものとしてレンダリングされません。ただし、ユーザーがラベル要素内のテキストをクリックするとコントロールが切り替わるため、マウス ユーザーの使いやすさが向上します。
タグの for 属性は、関連する要素の id 属性と同じにして、それらを結合する必要があります。