<label> - ラベル - とほほのWWW入門

<label> - ラベル

概要

形式: <label>～</label>
サポート: LS / H4 / e4 / Ch1 / Fx1 / Sa1 / Op1 / N6
カテゴリ: フローコンテンツ; フレージングコンテンツ; インタラクティブコンテンツ; パルパブルコンテンツ; フォーム関連要素 (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 を指定します。

使用例

HTML

<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> でラベルと部品を囲む方法です。

HTML

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

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

HTML

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

リンク

初版:2000年10月9日最終更新:2017年12月31日

http://www.tohoho-web.com/html/label.htm