<label> - ラベル

■ 概要

項  目説  明
記述形式 <label>~</label>
<label for="対象要素の id属性">~</label>
対応ブラウザー H4+ / e4+ / N6+ / Fx1+ / Op7+ / Ch1+ / Sa1+
種  類
(カテゴリー)
フロー・コンテンツフレージング・コンテンツ
インタラクティブ・コンテンツパルパブル・コンテンツ
置ける場所 フレージング・コンテンツが記入できる場所
内包要素
(コンテンツ・モデル)
フレージング・コンテンツ [ただし,ラベル付けした要素を除いて
ラベル付け可能なフォームに関連した要素を子孫にもたないこと。
また,label要素を子孫にもたないこと]
(コンテンツ・モデル: カテゴリー

■ 解説

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

指定には,label要素のみを使用する方法と,for属性を使用する方法とがあります。 label要素のみで指定する場合には,キャプションとなるテキストと関連付けたいコントロールを label要素内に配置します。

また,for属性を使用する場合は,値に対象とするコントロールの id属性の値を設定します。 この場合,<label>~</label> とフォーム部品の <input>に関するソースの書き方が少し柔軟になります。

HTML5 では,ブラウザーに対してフォーカスをラベル要素からフォーム部品へ移動する動作を要求しないことになりました。

■ ラベルの指定方法

ラベルは,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, for
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
なし
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ   

■ CSSプロパティ

種  類名  称
【よく使うもの】 colorbackground-colorfontfont-sizefont-family

■ 使用例

HTMLソース
CSS
<head> ~ </head>
<style type="text/css">
<!-- 
  label {
    display: block;
    background-color: aqua;
  }
-->
</style>
HTML
<body> ~ </body>
<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>

ブラウザー 表示例

■ 備考