<label> …… フォーム入力欄のキャプションを表す

<label>タグは、フォーム入力欄のキャプションを表す際に使用します。

label要素は、フォームの各入力欄となるユーザーインターフェイスのキャプションを表します。 label要素で指定するキャプションと、フォームの各入力欄を関連付けるには、2通りの方法があります。

■使用例

1つ目の方法は、label要素のfor属性の値と、 input要素、select要素、textarea要素などのフォーム部品のid名を同じものにする方法です。 label要素のfor属性の値とフォーム部品のid名が一致することで、 そのキャプションがどのフォーム入力欄のものなのかを関連付けます。

<input type="radio" name="yesno" id="kotae0"> <label for="kotae0">無回答</label>
<input type="radio" name="yesno" id="kotae1"> <label for="kotae1">はい</label>
<input type="radio" name="yesno" id="kotae2"> <label for="kotae2">いいえ</label>

■使用例

2つ目の方法は、label要素自体の中にフォーム部品を配置することによって、 同じlabel要素内に記述されたキャプションとフォーム入力欄を関連付けます。

<label><input type="radio" name="yesno"> 無回答</label>
<label><input type="radio" name="yesno"> はい</label>
<label><input type="radio" name="yesno"> いいえ</label>

上記2つの使用例で、キャプションとフォーム入力欄を関連付ける方法を2つ示しました。 どちらの場合にも、キャプションのテキスト部分をクリック（タップ）すると、関連するチェックボックスがcheckedの状態になります。 この挙動から、テキスト部分とチェックボックスが関連付けられていることが確認できます。

■属性

■使用例

もう一例、for属性を使用せずlabel要素自体の中にフォーム部品を配置したサンプルを示します。

<form action="./sample/posted.php" method="post">
 <p><label>フルネーム: <input name=fn> <small>書式: 名 姓</small></label></p>
 <p><label>年齢: <input name=age type=number min=0></label></p>
 <p><label>郵便番号: <input name=pc> <small>書式: 0000-000</small></label></p>
 <p><input type="submit" value="送信"></p>
</form>

■関連項目

Sponsors