<label></label>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

label要素で、フォーム部品とラベルを関連付けることができます。


<label for="name1">お名前：</label>
<input type="text" name="namae" size="30" id="name1">
属性 値 説明
for="" ID名 関連付ける部品の識別名を指定

通常は、フォーム部品のラベル（項目名）をクリックしても、その部品を選択したことにはなりません。

例えば、ラジオボタンの場合は、丸い部分をクリックしないとその部品を選択することができません。

はい 　 いいえ 　 どちらでもない

label要素で関連付けを行うと、次のようにラベルのクリックでその部品を選択できるようになります。

　 　

指定方法

指定方法には次の2通りがあります。

  • 2つ目の方法は、IE6以下では対応していません。（IE7からは対応しているようです）

1つ目の方法

まず、フォーム部品に id="" を追加して、その部品に識別名（ID）を指定しておきます。

次に、label要素に for="" を追加して、関連付けたいフォーム部品の識別名を指定します。

<input type="radio" name="example" value="はい" id="yes"> <label for="yes">はい</label>

上記の例では、yes という識別名によって、フォーム部品とラベルが関連付けられることになります。

2つ目の方法

次のように、label要素の中にフォーム部品とラベルを配置します。（部品は1つのみ配置が可能）

  • こちらの方法では、id属性やfor属性は使用しません。
<label><input type="radio" name="example" value="はい"> はい</label>

こちらの方が簡単に設定できますが、対応していないブラウザも多いようです。

識別名について

識別名を付ける際には、以下の点に注意してください。

  • 1つの識別名は、同じ文書内で1ヵ所にだけ使用できます。（重複させてはならない）
  • 使用できる文字は、半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）、コロン（ : ）、ピリオド（ . ）、です。（ハイフン以外の記号は使わない方が無難です）
  • アルファベットで始めなければなりません。（数字や記号で始めてはならない）
  • 大文字と小文字の区別があります。

accesskey属性の指定

accesskey属性を使用することで、ラベルにアクセスキーを割り当てることができます。

<input type="radio" name="example" value="はい" id="yes"> <label for="yes" accesskey="Y">はい（Y）</label>

アクセスキーを割り当てておくと、キーボードの操作によって任意の部品を容易に選択できるようになります。

使用例

識別名を使用して関連付けた例

<form method="post" action="formmail.cgi">

<table border="3" cellpadding="3">
<tr>
<td><label for="name1">お名前</label></td>
<td><input type="text" name="namae" size="20" id="name1"></td>
</tr>
<tr>
<td>回答</td>
<td><input type="radio" name="answer" value="はい" id="ans1a"> <label for="ans1a">はい</label>
　<input type="radio" name="answer" value="いいえ" id="ans1b"> <label for="ans1b">いいえ</label>
</td>
</tr>
<tr>
<td colspan="2"><label for="msg1">メッセージ</label></td>
</tr>
<tr>
<td colspan="2"><textarea name="message" cols="30" rows="5" id="msg1"></textarea></td>
</tr>
</table>

</form>
表示例
回答 　
  • サンプルのため送信できません。
accesskey属性を使用した例

<form method="post" action="formmail.cgi">

<table border="3" cellpadding="3">
<tr>
<td><label for="name2" accesskey="o">お名前（O）</label></td>
<td><input type="text" name="namae" size="20" id="name2"></td>
</tr>
<tr>
<td>回答</td>
<td><input type="radio" name="answer" value="はい" id="ans2a"> <label for="ans2a" accesskey="y">はい（Y）</label>
　<input type="radio" name="answer" value="いいえ" id="ans2b"> <label for="ans2b" accesskey="n">いいえ（N）</label></td>
</tr>
<tr>
<td colspan="2"><label for="msg2" accesskey="m">メッセージ（M）</label></td>
</tr>
<tr>
<td colspan="2"><textarea name="message" cols="30" rows="5" id="msg2"></textarea></td>
</tr>
</table>

</form>
表示例

Windowsの場合は、Alt + 任意のキー または Alt + Shift + 任意のキー などの操作で選択することができます。（ブラウザにより操作方法は異なります）

回答 　
  • サンプルのため送信できません。
識別名を使わずに関連付けた例

<form method="post" action="formmail.cgi">

<p><label>お名前：<input type="text" name="namae" size="20"></label></p>

<p>回答：
　<label><input type="radio" name="answer" value="はい"> はい</label>
　<label><input type="radio" name="answer" value="いいえ"> いいえ</label></p>

<p><label>メッセージ：<br>
<textarea name="message" cols="30" rows="5"></textarea></label></p>

</form>
表示例

回答： 　 　

  • サンプルのため送信できません。