両方を使用できることは知っていますが、どちらか一方を使用する方がよいでしょうか。もしそうなら、なぜですか?
「for」属性の例:
<input type="text" id="male"><label for="male">Male</label>
ラップの例:
<label>Age:<input type="text"></label>
意味的には、両方の可能性は同じです。ただし、必要なレイアウトに応じて、2つの可能性には長所と短所があります。たとえば、ラベルをまったく別の場所に配置したい場合、入力をラベルに入力しても意味がありません。ただし、cssを介してホバー効果を作成できるようにしたい場合は、たとえば、ラベルと入力の周囲の領域の両方の背景を設定する場合は、入力をラベルに配置することをお勧めします。
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/H44.htmlによると
一部の支援技術は、暗黙のラベルを正しく処理しません
したがって、折り返すときに、label要素に「for」属性を指定することもできます。
ラップを使用すると、for
属性を削除できます。これにより、入力要素の「id」属性を省略できます。テンプレートや、ページ上の複数のインスタンスで使用する必要のあるフォームに最適です。
それは問題ではありません。どちらも、ラベルとフィールドの関係を定義するという点で同じことを実現します。
ラベルに入力を埋め込むと、ラッピングの動作にも影響します。 <label><checkbox/>Value with spaces</label>
デフォルトでは、単一のユニットとしてラップされます。一方<checkbox id="check"/><label for="check">Value with spaces</label>
、スペースで区切り文字を使用してテキストを折り返し、ラベルを新しい行に折り返しますが、上のチェックボックスはそのままにしておきます。
ASP.NETのようなフレームワークは、要素を//要素の隣に配置し、label
' s属性を使用します。input
select
textarea
label
for
'label for'構文は、作成したラベルがID'inp'の入力のラベルとなることを目的としていることを意味します。ほとんどのブラウザでこのラベルをクリックすると、カーソルのフォーカスが「inp」入力要素に移動します。これは、ラベルを対応するフォームコントロールにリンクするためのちょっとした方法です。
互換性の問題や、パフォーマンスに関する問題については認識していません。私にはそれは構文的に正しいように思えます、そして私が知っている限り、CSS仕様は両方とも有効であると主張しています。
for
ほとんどのブラウザは両方に同じ動作を実装していると思いますが、構文を使用すると、関係がより明確に定義されます。
好みの問題だと思います。個人的には、要素がその要素の一部であるfor
よりも意味的に意味があると思うので、構文を使用します。input
label