435

次の 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 を検証したり、他の理由で必要になったりしますか?

4

7 に答える 7

62

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

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

HTML 仕様では、ラベルをコントロールに関連付けることを義務付けていませんが、Web コンテンツ アクセシビリティ ガイドライン (WCAG) 2.0 では義務付けています。これは、技術文書H44: Using label elements to associated text labels with form controlsで説明されており、暗黙的な関連付け (たとえばinputinside による) は、および属性によるlabel明示的な関連付けほど広くサポートされていないことも説明されています。forid

于 2013-08-25T19:17:57.597 に答える
2

タグのfor属性は、関連する要素<label>の属性と同じにして、idそれらを結合する必要があります。

于 2013-08-25T18:42:50.750 に答える
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>
于 2019-11-04T12:28:30.093 に答える