HTML

チェックボックス

詳細を開く 詳細を閉じる

HTMLコード

<input>type属性 - checkbox

テキスト型
textテキストボックス
passwordパスワード
number数値
emailメールアドレス
urlURL
tel電話番号
search検索語
ボタン型
submit送信ボタン
resetリセットボタン
button一般のボタン
image画像ボタン(送信)
特殊型
radioラジオボタン
checkboxチェックボックス
hidden隠しエリア
fileファイル送信
range数値レンジ
colorカラーパレット
日付型
date日付
datetime日付と時刻
datetime-localローカルタイム
month
time時刻
week
  • <input>type属性にcheckboxを指定すると、チェックボックスになります。
  • リセットボタンをクリックすると、選択が解除されます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<input type="checkbox" name="c1" value="aaa">aaa
<input type="checkbox" name="c2" value="bbb">bbb

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

ラベル : <label>

  • チェックボックスは常に<label>要素と共に使いましょう。
  • 上の例では、「aaa」、「bbb」などの文字列をクリックしても選択できません。ユーザが混乱する原因となるので<label>は必須です。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="checkbox" name="c1" value="aaa">aaa</label>
<label><input type="checkbox" name="c2" value="bbb">bbb</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

初期値 : checked

  • 初期値はchecked属性で設定できます。
  • リセットボタンをクリックすると、初期値に戻ります。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="checkbox" name="c1" value="aaa">aaa</label>
<label><input type="checkbox" name="c2" value="bbb" checked>bbb</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

選択必須 : required

  • 選択必須の項目はrequired属性で設定できます。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="checkbox" name="c1" value="aaa">aaa</label>
<label><input type="checkbox" name="c2" value="bbb" required>bbb</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

セレクトボックス : <select> multiple

  • <select>multiple属性を指定すると、複数選択できるセレクトボックスになり、チェックボックスと同様の機能を実現できます。
  • ただし、セレクトボックスで複数選択する場合はシフトキーを押しながらクリックする必要があり、スマートフォン等では操作が難しいです。
  • よって、複数選択できるセレクトボックスよりはチェックボックスを使った方が良い場合が多いです。

別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label><input type="checkbox" name="c1" value="aaa">aaa</label>
<label><input type="checkbox" name="c2" value="bbb">bbb</label>
<label><input type="checkbox" name="c3" value="ccc">ccc</label>
<label><input type="checkbox" name="c4" value="ddd">ddd</label>
<br><br>

<select name="select[]" multiple size="4">
	<option value="aaa">aaa</option>    
	<option value="bbb">bbb</option>
	<option value="ccc">ccc</option>
	<option value="ddd">ddd</option>
</select>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

CSSコード

CSSなし


別ウィンドウで表示

<form action="../aaa.php" method="GET">

<label class="label">
	<input type="checkbox" name="c1" value="aaa">aaa
</label>
<label class="label">
	<input type="checkbox" name="c2" value="bbb">bbb
</label>

<br><br>
<button type="submit">送信</button>
<button type="reset">リセット</button>
	
</form>

色 : color/background


別ウィンドウで表示
/* CSSファイル */
.label {
	color:			brown;
	background:		khaki;
}
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ