今回はHTML5のlabelタグについて勉強してみました。
あまり使った事がなかったのですが、今後フォームを作るときには使っていこうと思います。

labelタグってどんなタグ??

フォームでチェックボックスを作った時に項目名と関連づけることができます。
例えば、チェックボックスにカーソルを置かなくてもlabel付けされたテキストを選択すると、チェックボックスがアクティブな状態になります。
例えば以下のようなコードを書いたときに、

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>label_sample</title>
</head>
<body>
<form action="sample.php" method="post">
<p><label><input type="checkbox" name="hobby" value="sports">スポーツ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form> 
</body>
</html>

結果

いま、スポーツのチェックボックスがアクティブな状態となっていますが、チェックボックスの上にカーソルを置かなくてもスポーツというテキストの部分にカーソルを置くだけでアクティブな状態にする事が出来ます。

属性

labelタグには二つの属性があります。
form要素とラベルを関連付けるform属性(formのidと属性の値を一致させる)と、フォーム部分とラベルを関連付ける(フォーム部分のidと属性の値を一致させる)for属性です。
上のサンプルコードのように<label>~</label>の中にフォーム部品を配置するやり方でも関連付けることができます。

以上

最終更新:2015年11月12日 18:30
添付ファイル