「HTML5のlabelタグ」の編集履歴（バックアップ）一覧はこちら
「HTML5のlabelタグ」(2015/11/12 (木) 18:30:39) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
今回は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>
**結果
#image(width=250,label_sample1.png)
いま、スポーツのチェックボックスがアクティブな状態となっていますが、チェックボックスの上にカーソルを置かなくてもスポーツというテキストの部分にカーソルを置くだけでアクティブな状態にする事が出来ます。~
~
*その他にはどんな事ができる？？
今回は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>
**結果
#image(width=250,label_sample1.png)
いま、スポーツのチェックボックスがアクティブな状態となっていますが、チェックボックスの上にカーソルを置かなくてもスポーツというテキストの部分にカーソルを置くだけでアクティブな状態にする事が出来ます。~
~
*属性
labelタグには二つの属性があります。~
form要素とラベルを関連付けるform属性(formのidと属性の値を一致させる)と、フォーム部分とラベルを関連付ける(フォーム部分のidと属性の値を一致させる)for属性です。~
上のサンプルコードのように<label>～</label>の中にフォーム部品を配置するやり方でも関連付けることができます。~
~
以上
