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











広告
<label>タグは、フォーム入力欄のキャプションを表す際に使用します。
label要素は、フォームの各入力欄となるユーザーインターフェイスのキャプションを表します。
label要素で指定するキャプションと、フォームの各入力欄を関連付けるには、2通りの方法があります。
■使用例
1つ目の方法は、label要素のfor属性の値と、
input要素、select要素、textarea要素などのフォーム部品のid名を同じものにする方法です。
label要素のfor属性の値とフォーム部品のid名が一致することで、
そのキャプションがどのフォーム入力欄のものなのかを関連付けます。
HTMLソース
<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要素内に記述されたキャプションとフォーム入力欄を関連付けます。
HTMLソース
<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属性
- ラベルをフォームコントロールに関連付けます。
■使用例
もう一例、for属性を使用せずlabel要素自体の中にフォーム部品を配置したサンプルを示します。
HTMLソース
<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>
↓↓↓
ブラウザ上の表示
■関連項目
- <form> …… フォームを表す
- <label> …… フォーム入力欄のキャプションを表す
- <input> …… フォーム入力欄を表す
- <button> …… ボタンを表す
- <select> …… セレクトボックスを表す
- <datalist> …… 選択肢のデータリストを表す
- <optgroup> …… 選択肢グループを表す
- <option> …… 選択肢を表す
- <textarea> …… 複数行プレーンテキストの入力欄を表す
- <output> …… 実行結果の出力を表す
- <progress> …… タスクの進行状況を表す
- <meter> …… 既知の範囲内の測定値を表す
- <fieldset> …… フォームグループを表す
- <legend> …… フォームグループのキャプションを表す
広告