<label>

HTML の <label> 要素は、ユーザーインターフェイスの項目のキャプションを表します。

属性

この要素にはグローバル属性があります。

for

ラベル要素と同一の文書内にあるラベル付け可能フォーム関連要素の id。文書中の for 属性の値と合致する ID を持つ最初の要素が、このラベル要素の示すラベル付きコントロールとなります。

for 属性が包含するコントロール要素を指すのであれば、label 要素で for 属性と包含するコントロール要素の両方を持つことができます。

form HTML5

label 要素と紐付けたフォームコントロールが属する form 要素 (form owner)。属性値は、同一の文書内にある <form> 要素の ID にします。この属性により、label 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。

このコンテンツ属性は2016年4月28日に HTML 仕様書から削除されました。ただしスクリプトは引き続き、読み取り専用の HTMLLabelElement.form 属性にアクセスできます。これはラベルが関連付けられたコントロールが属するフォームを返し、ラベルがコントロールに関連付けられていなかったり、そのコントロールがフォームに属していなかったりした場合は null を返します。

使用上のメモ

• コントロールを <label> の子要素として配置するか for 属性を用いることで、ラベルとコントロールを関連付けることができます。そのように関連付けられたコントロールは、ラベル要素のラベル付きコントロール (labeled control)と呼ばれます。ひとつの input を複数のラベルに関連付けることができます。
• ラベル自体は、フォームに直接関連付けられません。ラベルは自身が関連付けられるコントロールを通して、間接的にフォームに関連付けられます。
• <label> がクリックやタップされ、それがフォームのコントロールに関連付けられていた場合は、 click イベントが関連付けられたコントロールにも発生するようになります。

例

シンプルな label の例

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

"for" 属性の使用例

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

仕様策定状況

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• その他のフォーム関連要素: <form>, <input>, <button>, <datalist>, <legend>, <select>, <optgroup>, <option>, <textarea>, <keygen>, <fieldset>, <output>, <progress>, <meter>.