Sep.16th, 2020
＃
“type="checkbox"”
“type="checkbox"”を指定した“input”要素はチェックボックスを表します。
フォームの送信時には“name”属性の値とともに“value”属性の値が送信されます。“value”属性が指定されていない場合に送信される値の既定値は“on”です。チェックボックスが選択されていない場合はフォームの送信時に“name”属性の値も“value”属性の値も送信されません。
一般的なブラウザでは四角形のボックスとして表示され、選択されるとボックスの中にチェックが入ります。
ラジオボタン(“type="radio"”)と異なりチェックボックスはグループ化されません。同じ値の“name”属性を指定した複数のチェックボックスで入力欄を構成したい場合は入力値を受け取るプログラムが重複した“name”属性の値に組み合わせられた“value”属性の値をすべて処理できるようにする必要があります。
複数の選択肢から一つだけを選択させる場面ではラジオボタン(“type="radio"”)を使用します。また、“select”要素でも選択式の入力欄を表すことができます。
サンプルコード
単独のチェックボックス
<form method="post" action="sample-inputtag2.php" target="_blank">
<fieldset>
<legend>猫が好きですか？</legend>
<p>
<label><input type="checkbox" name="sample01">好き</label>
</p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
複数のチェックボックス
<form method="post" action="sample-inputtag3.php" target="_blank">
<fieldset>
<legend>猫の色</legend>
<p>
<label><input type="checkbox" name="sample02[]" value="白">白</label>
<label><input type="checkbox" name="sample02[]" value="黒">黒</label>
<label><input type="checkbox" name="sample02[]" value="灰">灰</label>
<label><input type="checkbox" name="sample02[]" value="薄茶">薄茶</label>
<label><input type="checkbox" name="sample02[]" value="焦げ茶">焦げ茶</label>
</p>
</fieldset>
<p><button type="submit">送信する</button></p>
</form>
＃
属性と値
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| type="" | 入力欄の種類 | checkbox | チェックボックス |
| 任意属性 | |||
| グローバル属性 | checked="" | 選択された状態にする | checked | 選択された状態にする |
| disabled="" | 入力欄を無効化 | disabled | 入力欄を無効化 |
form="" |
関連付けるフォーム | ID名 | 関連づける“form”要素の“id”属性の値 |
| name="" | 入力欄の名前 | 文字列 | 入力欄の名前 |
| required="" |
入力を必須にする | required | 入力を必須にする |
| value="" | フォームで送信される値 | 文字列 | フォームで送信される値 |
＃
