チェックボックスのラベルでもチェックの On/Off ができます
ラベルとはチェックボックスやラジオボタンの横に書いた文字列のことです。
ラジオボタンにも使えます
サンプルソース
<HTML>
<HEAD>
<TITLE>チェックボックスのラベルでもチェックの On/Off の選択を可能にする</TITLE>
<STYLE type="text/css">
<!--
a,label { cursor:pointer; }/*ラベルにマウスが乗ったらカーソルの形状をポインタにします*/
.Lbl { /*ラベルの装飾 下線を付けます*/
border-bottom-width : 1px;
border-bottom-style : dashed;
border-bottom-color : gray;
}
-->
</STYLE>
</HEAD>
<BODY>
<form>
<input type="checkbox" id = "l_box1"><label for="l_box1" class="Lbl">Javascript</label>
<input type="checkbox" id = "l_box2"><label
for="l_box2" class="Lbl">スタイルシート</label>
<input type="checkbox" id = "l_box3"><label for="l_box3" class="Lbl">ブログ カスタマイズ</label><br/>
</form>
<p>ラジオボタンにも使えます</p>
<form>
<input type="radio" name="raji" id = "raji1"><label for="raji1" class="Lbl">ラジオボタン １</label><br/>
<input type="radio" name="raji" id = "raji2"><label
for="raji2" class="Lbl">ラジオボタン ２</label><br/>
<input type="radio" name="raji" id = "raji3"><label for="raji3" class="Lbl">ラジオボタン ３</label>
</form>
</BODY>
</HTML>
チェックボックスやラジオボタンのよこに表示する文字列を<label....>文字列 </label>タグに置きます。
input要素のid属性の値 id = "l_box1"、とlabel要素のfor属性の値 for="l_box1"、を同じにする l_box1ことで
ラベルも On/Off の選択が可能になります。
ラベルにマウスが乗ったらカーソルの形状をポインタに変えて 視覚的に解りやすく、しています
