<label> - ラベル

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

概要

項目説明
形式<label>~</label>
サポートH4 / e4 / Ch1 / Fx1 / Sa1 / Op1 / N6
カテゴリフローコンテンツ, フレージングコンテンツ, インタラクティブコンテンツ, リアソシエイタブル, フォーム関連, パルパブルコンテンツ
親要素フレージングコンテンツ を子要素に持てるもの
子要素フレージングコンテンツ (ただし、label要素や、複数のラベル付け対象を子孫に含むことはできない)
タグの省略開始タグ:必須 / 終了タグ:必須

説明

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

ラベルの指定方法

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

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

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

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

属性

【固有属性】
属性意味
form=idH5。関係付けたい form要素の id属性を指定します。
for=forH4/e4/Ch/Fx/Sa/Op/N6。関連づけたいフォーム部品の id属性を指定します。
【データバインド属性】
属性意味
datafld=dataflde4-?。データバインド機能を用いる際の、データソースの列名を指定します。
dataformatas=formate4-?。データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。
datasrc=datasrce4-?。データバインド機能を用いる際の、データソースの ID を指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

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>

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

表示

Copyright (C) 2000-2015 杜甫々
初版:2000年10月9日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/label.htm