<label> - ラベル

• トップ
• HTMLリファレンス
• <label>

• 概要
• 説明
• 属性
  • 共通属性
  • 重要属性
  • データバインド属性
• 使用例
• リンク

概要

形式

<label>～</label>

サポート

https://caniuse.com/mdn-html_elements_label

カテゴリ

フローコンテンツ

フレージングコンテンツ

インタラクティブコンテンツ

パルパブルコンテンツ

フォーム関連要素 (HTML 5.2)

親要素

フレージングコンテンツ を子要素に持てるもの

子要素

フレージングコンテンツ。ただし、ラベルコントロールではないラベル付け化可能要素や、label 要素を子孫に持たない。

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

for

説明

<label> は、フォームの中で、フォーム部品とラベルを関係付けるために用います。ラベルを明示することにより、ブラウザでラベルをクリックした時や、ラベルのアクセスキーを押した時に、その部品をクリックしたのと同じ動作をさせることができるようになります。

属性

共通属性

グローバル属性

詳細は グローバル属性 を参照してください。

重要属性

for=for

LS/H4/e4/Ch/Fx/Sa/Op/N6

関連づけたいフォーム部品の id属性を指定します。

form=id

[非推奨] H5-5

関係付けたい form要素の id属性値を指定します。これにより、label要素が form要素の子要素でなくても、両者を関係づけることができます。HTML5 で定義されましたが、HTML 5.1 で廃止されました。

データバインド属性

datafld=datafld

[非推奨] e4-?

データバインド機能を用いる際の、データソースの列名を指定します。

dataformatas=format

[非推奨] e4-?

データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。

datasrc=datasrc

[非推奨] e4-?

データバインド機能を用いる際の、データソースの ID を指定します。

使用例

<form action="xxx.cgi">
  <div>
    <input type="radio" name="YES_NO" id="r1" value="yes" checked>
    <label accesskey="Y" for="r1">はい(<u>Y</u>)</label>
    <input type="radio" name="YES_NO" id="r2" value="no">
    <label accesskey="N" for="r2">いいえ(<u>N</u>)</label>
  </div>
  <input type=submit value="送信">
</form>

ラベル部分もクリックできるようになります。

ラベルは、2通りの指定方法があります。ひとつは、<label>～</label> でラベルと部品を囲む方法です。

<label>
  名前: <input type="text" name="NAME">
</label>

もうひとつは、<label> の for 属性に部品の ID を指定する方法があります。

<label for="t1">名前:</label>
<input id="t1" type="text" name="NAME">

リンク

• https://html.spec.whatwg.org/multipage/forms.html#the-label-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/label
• https://caniuse.com/mdn-html_elements_label

---