inputタグに type="checkbox" を指定すると、チェックボックスを作成できます。(選択肢の中から複数選べるタイプ)
<input type="checkbox" name="example" value="サンプル">サンプル
<input type="checkbox" name="example" value="サンプル" checked>サンプル
| name="" | ボタン名を指定します(一般的には半角英数字) |
|---|---|
| value="" | 送信される内容を指定します |
| checked | 最初から選択された状態にします |
■name="" (ボタン名を指定する)
入力項目を判別するための名前です。複数のボタンに同じボタン名を付けることで、1つのボタングループを作れます。
チェックボックスは、グループの中から複数選べるタイプのボタンになります。
■value="" (送信される内容を指定する)
そのボタンが選択されたとき、value="" の内容が送信されます。
■checked (最初から選択された状態にする)
checked を指定したボタンは、最初から選択された状態になります。
■2つのボタングループを作る場合
<form method="POST" action="example.cgi">
<p>
質問1 ペットにしたい動物は?(複数選択可)
<br>
<input type="checkbox" name="q1" value="犬">犬
<input type="checkbox" name="q1" value="猫">猫
<input type="checkbox" name="q1" value="ハムスター">ハムスター
<input type="checkbox" name="q1" value="鳥">鳥
<input type="checkbox" name="q1" value="熱帯魚">熱帯魚
<input type="checkbox" name="q1" value="爬虫類">爬虫類
</p>
<p>
質問2 休日の過ごし方は?(複数選択可)
<br>
<input type="checkbox" name="q2" value="映画鑑賞">映画鑑賞
<input type="checkbox" name="q2" value="ドライブ">ドライブ
<input type="checkbox" name="q2" value="買い物">買い物
<input type="checkbox" name="q2" value="ゲーム">ゲーム
<input type="checkbox" name="q2" value="スポーツ">スポーツ
<input type="checkbox" name="q2" value="ゴロ寝">ゴロ寝
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■2つのボタンにcheckedを指定する場合
<form method="POST" action="example.cgi">
<p>
質問3 よく観るテレビ番組は?(複数選択可)
<br>
<input type="checkbox" name="q3" value="ドラマ">ドラマ
<input type="checkbox" name="q3" value="バラエティー" checked>バラエティー
<input type="checkbox" name="q3" value="ニュース">ニュース
<input type="checkbox" name="q3" value="歌謡">歌謡
<input type="checkbox" name="q3" value="映画">映画
<input type="checkbox" name="q3" value="スポーツ" checked>スポーツ
</p>
<p><input type="submit" value="送信する"></p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません