<label>のHTMLfor =“”属性とは何ですか？

私はこれをjQueryで見ました-それは何をしますか？

<label for="name"> text </label>
<input type="text" name="name" value=""/>

関連付けるに<label>して<input>要素、あなたは与える必要がある属性を。その後、必要その属性入力のと同じです。<input>id<label>forvalueid

<label for="username">Click me</label>
<input type="text" id="username">

for属性が関連付け<label>て<input>要素。これにはいくつかの大きな利点があります
。1。ラベルテキストは、対応するテキスト入力に視覚的に関連付けられているだけではありません。プログラム的にも関連付けられています。これは、たとえば、ユーザーがフォーム入力に焦点を合わせたときにスクリーンリーダーがラベルを読み上げることを意味し、支援技術のユーザーが入力する必要のあるデータを理解しやすくなります。
2.関連付けられたラベルをクリックして、入力および入力自体にフォーカス/アクティブ化できます。この増加したヒットエリアは、タッチスクリーンデバイスを使用している人を含め、入力をアクティブにしようとしている人に利点を提供します。

または、の<input>内部に直接ネストすることもできます。<label>この場合、関連付けは暗黙的であるため、属性forとid属性は必要ありません。

<label>Click me <input type="text"></label>

注：
1つinputは複数のラベルに関連付けることができます。
a<label>がクリックまたはタップされ、それがフォームコントロールに関連付けられている場合、結果のクリックイベントも、関連付けられているコントロールに対して発生します。

アクセシビリティの懸念

アンカーやボタンなどのインタラクティブな要素をラベル内に配置しないでください。そうすると、ラベルに関連付けられたフォーム入力をアクティブ化することが困難になります。

見出し

<label>見出しはナビゲーション補助として一般的に使用されるため、見出し要素を干渉内に配置すると、多くの種類の支援技術が妨げられます。ラベルのテキストを視覚的に調整する必要がある場合は、<label>代わりに要素に適用されたCSSクラスを使用してください。
フォームまたはフォームのセクションにタイトルが必要な場合は、フォーム<legend>内に配置された要素を使用します。<fieldset>。

ボタン

<input>持つ要素type="button"宣言と有効なvalue属性は、それに関連付けられたラベルを必要としません。そうすることは、支援技術がボタン入力を解析する方法を実際に妨げる可能性があります。同じことが<button>要素にも当てはまります。

参照：https： //developer.mozilla.org/en-US/docs/Web/HTML/Element/label

for属性は、ラベルに使用されています。これは、このラベルが関連付けられている要素のIDを参照します。

例えば：

<label for="username">Username</label>
<input type="text" id="username" name="username" />

これで、ユーザーがusernameテキストをマウスでクリックすると、ブラウザは自動的に対応するinputフィールドにフォーカスを置きます。これは、<textbox>やなどの他の入力要素でも機能します<select>。

仕様からの引用：

この属性は、定義されているラベルを別のコントロールに明示的に関連付けます。存在する場合、この属性の値は、同じドキュメント内の他のコントロールのid属性の値と同じである必要があります。存在しない場合、定義されているラベルは要素のコンテンツに関連付けられます。

あなたの質問がjQueryでタグ付けされている理由と、それがjQueryで使用されているのをどこで見たのかについては、多くの情報を提供しなかったため、答えることができません。

おそらく、ラベルインスタンスを指定して対応する入力要素を見つけるためにjQueryセレクターで使用されました。

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

これに答える必要があると感じています。私も同じ混乱をしました。

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

'male'ラベルのfor属性をfemaleに変更しました。ここで、「男性」をクリックすると、「女性」ラジオがチェックされます。

そのような単純な。

簡単な例：

<label for="name">Name:</label>
<input id="name" type="text" />

for=""あなたにもラベルをクリックすると、タグが入力を注目しましょう。

これをラベルとともに使用して、2つのオブジェクトが一緒に属していることを示します。

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

これは、そのラベルをクリックするとチェックボックスの値が変更されることも意味します。

参考までに-たとえば、タイプスクリプト環境にいる場合

<label for={this.props.inputId}>{this.props.label}</label>

htmlForを使用する必要があります

<label htmlFor={this.props.inputId}>{this.props.label}</label>

<label>要素に使用されます

ラベルクリックで選択するために、入力タイプのチェックボックスまたはREDIOとともに使用されます

作業デモ

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

<label>HTMLのテキストで使用されます

例えば。

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

ラベルを入力要素に関連付けます。HTMLタグは、さまざまなカテゴリのユーザーに特別な意味を伝えることを目的としています。ラベルの意味は次のとおりです。

1. 運動障害のある人の場合（一般的なマウスユーザーの場合）：正しく使用されているラベルタグをクリックして、関連するフォームコントロールにアクセスできます。例えば。特にチェックボックスをクリックする代わりに、ユーザーはより簡単にクリックできるラベルをクリックしてチェックボックスを切り替えることができます。
2. 視覚挑戦ユーザーに対して：視覚障害ユーザーがフォームコントロールがフォーカスされたときに関連付けられたラベルタグを読み取るスクリーンリーダーを使用します。これは、ユーザーが他の方法では見えなかったラベルを知るのに役立ちます。

ラベル付けの詳細-> https://www.w3.org/TR/WCAG20-TECHS/H44.html

<label>タグの属性です：http：//www.w3schools.com/tags/tag_label.asp