HTML の <label> 要素は、ユーザーインターフェイスの項目のキャプションを表します。
<label>
<label> を {{htmlelement("input")}} 要素と関連付けると、いくらかの利点が発生します。
<label> を <input> 要素に関連付けるには、 <input> に id 属性を設定しなければなりません。そして <label> に for 属性を設定して、値を input の id と同じにします。
<input>
id
for
他の方法として、 <input> を直接 <label> の内側に入れることができますが、この場合は関連付けが明確なので、 for および id 属性は必要ありません。
<label>Do you like peas? <input type="checkbox" name="peas"> </label>
その他の使用上の注意事項
click
この要素にはグローバル属性があります。
<label> には特殊なスタイル上の考慮事項はありません。 — 構造的に単純なインライン要素であり、ほとんどは {{htmlelement("span")}} や {{htmlelement("a")}} 要素と同じ方法でスタイルを適用します。テキストが読みにくくならない限り、あらゆる方法でスタイルを適用することができます。
<label>Click me <input type="text"></label>
{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}
<label for="username">Click me</label> <input type="text" id="username">
{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}
label の中に{{HTMLElement("a", "アンカー")}}や{{HTMLElement("button", "ボタン")}}のような対話型要素を配置しないでください。そのようにすると、ユーザーが label に関連したフォーム入力欄を有効化する事が難しくなります。
label
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> <a href="terms-and-conditions.html">利用規約と利用条件</a>に同意します。 </label>
<label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> 利用規約と利用条件に同意します。 </label> <p> <a href="terms-and-conditions.html">利用規約と利用条件を読む</a> </p>
見出しは一般的にナビゲーションエイドとして使用されるため、 <label> の中にヘッダー要素を配置すると、数多くの種類の支援技術を妨げることになります。ラベルの文字列を視覚的に調整する必要がある場合は、代わりに <label> 要素に CSS クラスを適用してください。
フォーム、またはフォームのセクションにタイトルが必要な場合は、 {{HTMLElement("fieldset")}} の中に {{HTMLElement("legend")}} を配置して使用してください。
<label for="your-name"> <h3>Your name</h3> <input id="your-name" name="your-name" type="text"> </label>
<label class="large-label" for="your-name"> Your name <input id="your-name" name="your-name" type="text"> </label>
{{HTMLElement("input")}} 要素に type="button" がついた宣言に妥当な value 属性があれば、関連付けるラベルは必要ありません。ラベルを付けると、支援技術がボタン入力をどう解釈するかをじゃまする可能性があります。 {{HTMLElement("button")}} 要素でも同じことが言えます。
type="button"
value
role
{{Compat("html.elements.label")}}