HTMLの<label>タグで「for」属性は何をしますか？

382

次の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を検証するか、または他の何らかの理由で必要ですか？

— ジェフ
ソース

578

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

1つの方法は、入力要素の周りにラベル要素をラップすることです。

<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をご覧ください。

— バルマー
ソース

106

for属性はid属性によって入力にバインドされ、name属性は一致する必要がないことに注意してください。<label for = "theinput">ここに入力：</ label> <input type = 'text' name = 'notmatching' id = 'theinput'>引き続き機能します

— Glo

4

ラベルのクリックは、関連付けられた要素のクリックとまったく同じように扱われるとは限りません。たとえばChromeとSafariでは、にselectのみ関連付けられているラベルをクリックすると、オプションが展開されるのではなく、選択にフォーカスが置かれます。

— Emile Pels、2016

2

@EmilePelsブラウザのイベントモデルに関する限り、それらは同等です。あなたが説明しているのは、マウス自体に関連付けられているドロップダウンメニューのOSの処理によって提供されるUIの詳細です。

— Barmar 2016

3

アクセシビリティとスクリーンリーダーに非常に関連しているので、なぜそれを積極的に使用するかについて言及することは重要なようです。

— coyotte508 2016

1

私は、入力フィールドの「for」属性を持つフォームのラベルをクリックするたびに、ボディのクリックが2回発生するのに、過去2時間苦労していました。ラベルのクリックでstopPropagationを使用しても、本文のクリックがまだ発生した理由を理解しました...説明した動作に従って入力フィールドによってクリックが発生したためです。

— サミュエル

53

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

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

HTML仕様では、ラベルをコントロールに関連付ける必要はありませんが、Webコンテンツアクセシビリティガイドライン（WCAG）2.0では必須です。これは、技術的なドキュメントに記述されているフォームのコントロールに関連付けるテキストラベルにラベル要素を使用して：H44、また、（例えばネストすることにより、暗黙的な関連性と説明してinput内部がlabel）として広く明示経由協会としてサポートされていないforとid、属性

— ユッカ・K・コルペラ
ソース

10

+1は、セマンティック関係と、機能的なクリック関係以外の意味について説明するためのものです。

— ulty4life

こんにちは、私は同じidを持つ2つの要素を持っていますが、異なるdivで、ラベルを使用してフォーカスイベントを追加しました。<html> <body> <div id = "first_div"> <label for = "name">名前</ label> <input type = "text" id = "name"> </ div> <div id = "second_div "> <label for =" name "> Name </ label> <input type =" text "id =" name "> </ div> </ body> </ html>

— LoveToCode

14

一言で言えば、それは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">

— ウーヴェ・キム
ソース

6

forを追加することは、隣接している場合でも重要です。視覚障害者用のスクリーンリーダーの中には、他に問題があると聞いたことがあるようです。そのため、別のブラウザやスクリーンリーダーを使用している可能性のあるユーザーに親しみやすくするには、この方法を使用します。

— bean5

3

<label>タグのfor属性は、それらを一緒にバインドするために、関連する要素のid属性と等しい必要があります。

— ラフル・トリパティ
ソース

7

はい、しかし「それらを一緒にバインドする」とはどういう意味ですか？それらはすでにHTML構造の隣人です。これは私が理解していないことです。

— jeff 2013

1

FORラベルがバインドされているフォーム要素を指定します

— Rahul Tripathi 2013

2

@CengizFrostclaw jsfiddle.net/DmSGh ---両方の「ここに入力」テキストをクリックして、何が起こるかを確認してください。

— JJJ 2013

1

@CengizFrostclaw：-「for」属性を使用して、ラベルを要素にバインドできます

— Rahul Tripathi

1

ラジオボタンを使用する場合など、いくつかの優れた機能があります。ラベルをクリックすると、実際にはラジオボタンが切り替わります。これは、カスタムUIでラジオボタンを使用するときに便利な機能です。

— Alex

0

for属性は、このラベルが関連する入力フィールド、またはチェックボックスまたはラジオボタン、またはそれに関連付けられた他のデータ入力フィールドを表すことを示します。例えば

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— パックス
ソース

0

これは、for属性のパラメーターであるすべての入力にラベルを付けます。

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>

スニペットを展開

— pythag0ras_
ソース