IT専科TOP>HTML/スタイルシート>HTMLタグ(ABC順)> <label>

<label>

コントロールに対する項目名を作成する要素です。<label>要素のfor属性に、対象となるコントロールのid属性と同じ値を指定することで、コントロールと項目名とを一体化(項目名をクリックしても選択できる)させることができます。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

仕様

・構成
要素区分 エンドタグ ネストできる要素 備考
インライン 省略不可 inline から<label>要素を除いたものが何回か出現、もしくは出現しない。

・属性
属性名 必須 意味
for 参照されたid属性値 一体化させたいコントロールのid値
accesskey 指定したキーがショートカットキーとして機能 例:k
class class名 スタイルシートを設定したclass名
id id名 スタイルシートを設定したid名もしくは、任意のテキスト
title 説明文 任意のテキスト
style スタイル 任意のスタイル
lang 言語コード 例(日本語):ja
dir 読む方向
rtl
右から左に読む
ltr
左から右に読む

・イベント
イベント 仕様
onclick クリック時に発生
ondblclick ダブルクリック時に発生
onmousedown 要素上でマウスボタンを押したときに発生
onmouseup 要素上でマウスボタンを離したときに発生
onmouseover ポインティングデバイスが要素上を通過したときに発生
onmousemove ポインティングデバイスが要素上で動くと発生
onmouseout 要素の領域から出るときに発生
onkeypress 要素上でキーが押されて、要素から離れたとき発生
onkeydown 要素上でキーが押されたとき発生
onkeyup 要素上で押されたキーを離したとき発生
onfocus フォーカスが合ったとき発生
onblur フォーカスが外れたとき発生

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
  </head>
  <body>
    <form name="frm1">
      <label for="r1">ラジオボタン1</label>
        <input type="radio" id="r1" name="radio1"><br>
      <label for="r2">ラジオボタン2</label>
        <input type="radio" id="r2" name="radio1"><br>
      <label for="check1">チェックボックス</label>
        <input type="checkbox" id="check1"><br>
      <label for="texarea">テキストエリア</label>
        <textarea cols="15" rows="4" id="texarea"></textarea><br>
      <label for="tex">テキストボックス</label>
        <input type="text" id="tex">
      <br>
      <!--<label>で囲んで対象を限定する方法-->
      <label>
        入力項目:
        <input type="test">
      </label>
    </form>
  </body>
</html>

表示結果






▲PageTop

関連項目

HTML

<input> / <textarea>

▲PageTop