web-dev-qa-db-ja.com

HTMLの<label>タグの "for"属性は何をするのですか？

次の2つのコードスニペットの違いは何でしょうか。

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

そして

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

あなたが特別なJavaScriptライブラリを使用するときそれが何かをすると確信しています、しかしそれとは別に、それはHTMLを検証するか、または他の何らかの理由で必要とされますか？

htmlformsinputlabel
341
jeff

<label>タグはラベルをクリックすることを可能にし、そしてそれは関連する入力要素をクリックするように扱われます。この関連付けを作成する方法は2つあります。

1つの方法は、input要素をlabel要素で囲むことです。

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

もう1つの方法は、for属性を使用して、関連付けられた入力のIDをそれに与えることです。

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

チェックボックスやボタンで使用すると特に便利です。ボックス自体をクリックする必要はなく、関連付けられているテキストをクリックしてボックスを確認できるからです。

この要素の詳細については _ mdn _ を参照してください。

509
Barmar

for属性は、HTML 4.01仕様の label の説明で定義されているように、ラベルをコントロール要素に関連付けます。これは、とりわけ、label要素が（たとえばクリックされることによって）フォーカスを受け取ると、そのフォーカスをそれに関連付けられたコントロールに渡すことを意味します。ラベルとコントロール間の関連付けは、音声ベースのユーザーエージェントによっても使用されます。これは、コントロールを処理するときに、関連付けられたラベルが何であるかをユーザーに尋ねる方法をユーザーに提供します。 （関連付けは視覚的レンダリングの場合ほど明確ではないかもしれません。）

質問の最初の例（forなし）では、labelマークアップの使用は論理的または機能的な意味がありません。CSSまたはJavaScriptでそれを使用しない限り、役に立ちません。

HTML仕様では、ラベルとコントロールを関連付けることは必須ではありませんが、Web Content Accessibility Guidelines（WCAG）2.0では義務付けられています。これは技術文書 H44：textラベルとフォームコントロールの関連付け に記述されています。これは暗黙の関連付け（例えばinputの内側にlabel）があることも説明していますforおよびid属性による明示的な関連付けほど広くはサポートされていません。

42
Jukka K. Korpela

簡単に言うと、入力のidを参照するだけです。

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">
12
user4133690

<label>タグのfor属性は、関連する要素のid属性と同じである必要があります。

4
Rahul Tripathi