<label>要素

<label>要素の定義

英語で「張り紙」や「荷札」を表す、”label”より。HTML文書では、各種フォームの項目など、ユーザーインターフェースのキャプションを表すための要素です。
この要素を活用することで、ラベルをクリックしても、そのラベルに対応する入力欄にフォーカスを移動させ、よりスムーズなフォームの入力を助けることができます。
そのためには、<input> 属性に”id”属性を指定し、それと同じキーワードを<label>要素の”for”属性に指定します。

子要素として使用できるもの

記述コンテンツが使用できます。ただし、子孫に<label>要素をもたせることはできません。

親要素として使えるもの

記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

なし

DOMインターフェース

HTMLLabelElement

属性

グローバル属性が指定できます。

for

<label>要素と同じHTML文書内にある、ラベル付が可能なフォーム関連要素の”id”属性と同じキーワードを指定します。

form

同一のHTML文書内にある、<form> 要素の”id”属性と同じキーワードを指定します。この属性を指定することで、<label>要素を、<form> 要素の子孫としてだけではなく、HTML文書のどこにでも配置できるようになります。

サンプル

See the Pen WVvaKZ by Masahiko Iwakiri (@m-iwakiri) on CodePen.