フォーム部品にキャプションを付けるには？
labelタグの書式
labelタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
labelタグの属性一覧
| 属性 | 内容 |
| グローバル属性 | ※グローバル属性のページを参照してください。 |
| for | キャプションを付けるフォーム部品の「id」属性の値を指定します。 |
| form | <label>と関連付けるフォームの「id」属性の値を指定します。 |
labelタグの解説
<label>は、フォーム部品にキャプションを付けるための要素です。
この要素を使うことで、フォーム部品とキャプション部分を連動させることができます。
例えば、チェックボックスの場合、<input>要素の後に、そのチェックボックスのキャプションを書いても、キャプションをクリックしてチェックボックスのオン/オフを切り替えることはできません。
<label>～</label>の中にキャプションを記述し、それをコントロールと関連付けておけば、ユーザーがチェックボックスのキャプションをクリックすると、チェックボックスの状態が切り替わるようになります。
その他のフォーム部品についても同様で、<label>を指定したキャプションをクリックすると、関連付けられたフォーム部品がクリックされたのと同じ動作をします。
フォーム部品にキャプションを付けるには、<label>の「for」属性で指定する方法と<label>内にフォーム部品を配置する方法があります。
labelタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1</title>
</head>
<body>
<p>各項目を入力し送信してください。</p>
<form action="sample1.cgi" method="post" enctype="multipart/form-data">
<p><label>お名前： <input name="n"></label></p>
<p><label>年齢: <input name="age" type="number" min=0></label></p>
<p><label>連絡先: <input name="adr"> <small>例: 03-1234-5678</small></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>
</body>
</html>
labelタグのサンプル画面1
labelタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2</title>
</head>
<body>
<section>
<h1>新規登録</h1>
<p>IDをお持ちでない方は、新規登録を行ってください。</p>
<p><label>登録名: <input name="n"></label></p>
<p><label form="user">メール: <input type="email" name="email" size="60"></label></p>
<p><label form="user"><input type="checkbox" name="chk">メール配信希望</label></p>
<form id="user" action="user.cgi" method="post">
<p><input type="submit" value="登録"></p>
</form>
</section>
</body>
</html>
labelタグのサンプル画面2
labelタグの関連項目
