チェックボックス

2009.08.05

[CSS]チェックボックスとテキストを揃える

チェックボックスとテキストをキレイに揃える方法をメモ。
参考にしたサイト
http://phpspot.org/blog/archives/2009/03/css_79.html
http://www.xinotes.org/notes/topic/437/
まずは xhtml の記述

<form>
<div style="width:350px">
	<input type="checkbox" id="cb" /><label for="cb">らべる1</label><br/>
	<input type="checkbox" id="cb2" />
	<label for="cb2">サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル	</label><br/>
	<input type="checkbox" id="cb3" />
	<label for="cb3">サンプルサンプルサンプルサンプルサンプルサンプル サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</label><br/>
	</div>
</form>

次に css の記述

input {
	display: block;
	float: left;
	clear: left;
	height: 12px;
	padding: 0;
	margin: 0;
}
label {
	display: block;
	clear: none;
	width: 300px;
	font-size: 12px;
	font-family: sans-serif;
	margin-left: 20px;
}

ポイントは clear の使い方ですね。勉強になります。

==アイコン素材PR==
注目！,スタンプ,ハンコ,はんこ,印鑑新商品,スタンプ,ハンコ,はんこ,印鑑新企画！,スタンプ,ハンコ,はんこ,印鑑新感覚！,スタンプ,ハンコ,はんこ,印鑑新食感！,スタンプ,ハンコ,はんこ,印鑑ポイント２倍！,スタンプ,ハンコ,はんこ,印鑑ポイント還元,スタンプ,ハンコ,はんこ,印鑑結果発表！,スタンプ,ハンコ,はんこ,印鑑新着情報！,スタンプ,ハンコ,はんこ,印鑑リニューアル中,スタンプ,ハンコ,はんこ,印鑑

2009.07.17

同じnameのチェックボックスのエラーチェック

同じnameを持つ、チェックボックスのエラーチェック javascript をメモ。

<script>
function check(obj){
 	var flag = true;
 	if(!obj.elements["くだもの"][0].checked && !obj.elements["くだもの"][1].checked){
 		alert('必須項目[くだもの]をチェックしてください');
 		flag= false;
 	}
 	return flag;
 }
</script>

<form method="post" action="send.cgi" onSubmit="return check(this)">
 	<input type="checkbox" name="くだもの" value="りんご" checked /> りんご
 	<input type="checkbox" name="くだもの" value="ばなな" /> ばなな
 	<input type="submit" value=" 送信 " />
 	<input type="reset" value=" 取消 " />
</form>

==PR==
たばこ,吸殻ファイル,バインダー豆,さやえんどうペン,万年筆車椅子ろうそく,ロウソク,燭台椅子,チェアー傘,パラソル緑,植物,グリーン,葉,葉っぱ飛行機,プロペラ機荷物,小包,プレゼント,ギフト箱,BOX,小物入れトランプリング,指輪メジャー看板,プレートフィルム電球 CD,CD-ROM 鍬