2008年09月15日

チェックボックスのラベルでもチェックの On/Off の選択を可能にする

スポンサード リンク

チェックボックスのラベルでもチェックの 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">ラジオボタン 1</label><br/>
<input type="radio" name="raji" id = "raji2"><label for="raji2" class="Lbl">ラジオボタン 2</label><br/>
<input type="radio" name="raji" id = "raji3"><label for="raji3" class="Lbl">ラジオボタン 3</label>
</form>
</BODY>
</HTML>

 チェックボックスやラジオボタンのよこに表示する文字列を<label....>文字列 </label>タグに置きます。
input要素のid属性の値 id = "l_box1"、とlabel要素のfor属性の値 for="l_box1"、を同じにする l_box1ことで
ラベルも On/Off の選択が可能になります。

ラベルにマウスが乗ったらカーソルの形状をポインタに変えて 視覚的に解りやすく、しています

posted by javaScript at 20:43 | 大阪 ☔ | チェックボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。