web-dev-qa-db-ja.com

HTMLラベルの「For」プロパティについて

次の2行のコードを検討します（w3schools.com> "HTML <label> for Attribute"からコピー）：

  <label for="male">Male </label>
  <input type="radio" name="sex" id="male" />

上記のラベルの「for」プロパティの正確な目的を見つけるのに苦労しています。ご覧のとおり、現在は（入力コントロールのIDと一致するように）「男性」に設定されています。

これまでに読んだのは、上記のコードがラベルを入力コントロールに「関連付け」、「バインド」することだけです。だから私の質問は、これは正確に何を意味するのですか？

ラベルを入力コントロールに関連付けた結果は正確に何ですか？
この「関連付け」の結果として、ラベルや入力に新しい動作がありますか？

htmllabel
91
user328414

labelを介してコントロールに関連付けられているforはクリック可能です。クリックすると、コントロールが選択されます。特にラジオ/チェックボックスで非常に便利です。また、視覚障害者向けのスクリーンリーダーのアクセシビリティへの影響もあります。

139
ceejayoz

label（男性）をクリックすると、ラベルを使用していない場合、無線は不可能な何かをチェックします。ラベルは、モバイルなどの小型デバイス用に開発する場合にも役立ちます。

したがって、次の場合に役立ちます。

  • アクセシビリティの理由
  • 携帯電話などの小型デバイス
  • 特にラジオボタンとチェックボックスで役立ちます
9
Sarfraz

ラベルをフォーム要素にリンクすると、labelにアクセスキーを割り当てることができ、それに関連付けられたフォーム要素にフォーカスが移ると思います。

他の人が述べたように、labelをクリックしてフォーム要素にフォーカスを移動することもできます。

For属性により、labelと要素をhtmlの意味的に異なる領域に配置し、関連付けを維持できます。 （2つのテーブル、または2つの異なるdivのように）。例のように両方を一緒に配置する場合、フォーム要素をラベルで囲み、for属性を省略することも正しい

3
Alex Larzelere

はい、Webページ、特にラジオボタンやチェックボックスのあるフォームに入力するとき、フォームコントロールまたはチェックメカニズムとして機能すると考えています。ラベルをクリックすると、ユーザーは正しい情報を入力するフォーム上の領域を直接ポイントします。たとえば、「テキスト」。または、ユーザーがtrueまたはfalse、または男性または女性など、いくつかのオプションから選択する必要がある場合。

3
fiifiblack