label要素

説明

<label>-</label>　開始タグ:必須終了タグ:必須

label要素は、フォーム内においてフォームの部品とそのラベルを関連付けるのに用います。明示的にラベルを指定することで、ラベルをクリックしたときや、ラベルのアクセスキーを押したときに、部品をクリックしたのと同様の動作をさせることができます。

属性 (W3C)

<label

H4- ie4- N6-

一般属性	id class style title lang dir %events;
for="IDの参照"	H4- ie4- N6- そろいの部品のID
accesskey="文字"	H4- ie4- N6- アクセスキー (Win[Alt]+[文字]、Mac[ctrl]+[文字]でフォーカス)
onfocus="スクリプト"	H4- ie4- N6- 選択時
onblur="スクリプト"	H4- ie4- N6- 選択解除時

>(%inline;)* -(label)</label>

指定方法

ラベルの指定方法は2通りあります。ひとつは、label要素のfor属性に部品のid属性を関連付ける方法です。


<input type="radio" id="r1" name="sex" value="m" checked>

<label for="r1">男性</label> 

<input type="radio" id="r2" name="sex" value="fm"> 

<label for="r2">女性</label>

もうひとつは<label>-</label>に部品とラベルを含む方法です。IE6までは未対応なので注意が必要です(*1)。
*1 IE7からサポートされています(2007/04/09)。


<label><input type="radio" name="sex" value="m" checked>男性</label>

<label><input type="radio" name="sex" value="fm">女性</label>

フォームのレイアウトに頻繁に用いるテーブルにおいて、<label>-</label>に部品を含める方法では、HTMLの文法上誤りになる点に注意しなければなりません。ネストに関する誤りが生じます。

使用例 #01 for属性と部品のid属性を関連付ける


<form action="cgi-bin/act.cgi" method="post">

<label for="t1">お名前：</label><input type="text" id="t1" name="n1"><br>

<input type="radio" id="r1" name="sex" value="m" checked><label for="r1">男性</label>

<input type="radio" id="r2" name="sex" value="fm"><label for="r2">女性</label><br>

<input type="submit" value="送信">

<input type="reset" value="リセット">

</form>

これはサンプルなので、送信ボタンのtype属性にbuttonを指定し無効化しています。

使用例 #02 <label>-</label>で部品を囲む


<form action="cgi-bin/profile.cgi" method="post">

<label>お名前： <input type="text" name="apple"></label><br>

<label><input type="radio" name="sex" value="male" checked> 男性</label>

<label><input type="radio" name="sex" value="female"> 女性</label><br>

<input type="button" value="送信">

<input type="reset" value="リセット">

</form>

これはサンプルなので、送信ボタンのtype属性にbuttonを指定し無効化しています。IEでは、7からサポートされています。

label要素 部品のラベル (form field label text)

説明

属性 (W3C)

指定方法

使用例 #01 for属性と部品のid属性を関連付ける

使用例 #02 <label>-</label>で部品を囲む

label要素部品のラベル (form field label text)