フォーム部品と説明文を関連付ける<label></label> | HTML タグ

ラベル<label></label>は、フォーム部品と説明文（キャプション）を関連付けることができる。

概要

フォーム部品と説明文（キャプション）を関連付けることで、説明文をクリックすると、フォーム部品がアクティブになる。
使用方法は、二つある。

• ラベル<label></label>のfor属性の値と、フォーム部品のid属性の値を揃える方法
• 説明文だけでなくフォーム部品もラベル<label></label>で囲む方法

属性

for=""

フォーム部品のid属性の値と同じ値を指定する。

id属性の値は、要素を識別するため、一意の値でなければならない。つまり、ページ内で、重複してはならない。

accesskey=""

アクセスキーを割り当てることができる。

アクセスキーを割り当てることで、” Alt + アクセスキー ” 、 ” Alt + Shift + アクセスキー ” 、 ” Control + アクセスキー ” などのショートカットを使用できるようになる。ショートカットの使い方は、ブラウザにより異なる。

ラベル使用例

ラベル要素のfor属性の値と、フォーム部品のid属性の値を揃える方法

チェックボックス

ソース
<input type="checkbox" name="music" value="pop" id="checkbox-pop">     <label for="checkbox-pop">ポップス</label> <input type="checkbox" name="music" value="rock" id="checkbox-rock">     <label for="checkbox-rock">ロック</label> <input type="checkbox" name="music" value="other" id="checkbox-other">     <label for="checkbox-other">その他</label>
表示
ポップス ロック その他

ラジオボタン

ソース
<input type="radio" name="music" value="pop" id="radio-pop" checked>     <label for="radio-pop">ポップス</label> <input type="radio" name="music" value="rock" id="radio-rock">     <label for="radio-rock">ロック</label> <input type="radio" name="music" value="other" id="radio-other">     <label for="radio-other">その他</label>
表示
ポップス ロック その他

一行のテキスト入力欄

ソース
<label for="name">名前</label><input type="text" name="name" id="name">
表示
名前

複数行のテキスト入力欄

ソース
<label for="message">メッセージ</label>     <textarea name="message" cols="50" rows="2" id="message"></textarea>
表示
メッセージ

説明文だけでなくフォーム部品もラベル要素で囲む方法

チェックボックス

ソース
<label>     <input type="checkbox" name="music" value="pop">     ポップス </label> <label>     <input type="checkbox" name="music" value="rock">     ロック </label> <label>     <input type="checkbox" name="music" value="other">     その他 </label>
表示
ポップス ロック その他

ラジオボタン

ソース
<label>     <input type="radio" name="music" value="pop" checked>     ポップス </label> <label>     <input type="radio" name="music" value="rock">     ロック </label> <label>     <input type="radio" name="music" value="other">     その他 </label>
表示
ポップス ロック その他

一行のテキスト入力欄

ソース
<label>名前     <input type="text" name="name"> </label>
表示
名前

複数行のテキスト入力欄

ソース
<label>メッセージ     <textarea name="message" cols="50" rows="2"></textarea> </label>
表示
メッセージ

アクセスキーを割り当てた例

チェックボックス

ソース
<input type="checkbox" name="music" value="pop" id="accesskey-checkbox-pop">     <label for="accesskey-checkbox-pop" accesskey="p">ポップス(P)</label> <input type="checkbox" name="music" value="rock" id="accesskey-checkbox-rock">     <label for="accesskey-checkbox-rock" accesskey="r">ロック(R)</label> <input type="checkbox" name="music" value="other" id="accesskey-checkbox-other">     <label for="accesskey-checkbox-other" accesskey="o">その他(O)</label>
表示
ポップス(P) ロック(R) その他(O)

一行のテキスト入力欄

ソース
<label accesskey="n">名前(N)     <input type="text" name="name"> </label>
表示
名前(N)