HTMLフォームの作り方②｜チェックボックスとラジオボタンで“選ぶ入力フォーム”を作ろう

こんにちは！駆け出しエンジニアのまるです👓🦍

前回は、名前・メール・メッセージを入力できるフォームを作りました。

今回はその続きとして、「チェック」や「選択」ができるフォームを作ってみましょう！

「選ぶ入力」とは？

これまでのフォームは、文字を“書く”タイプでした。

でも、実際のWebサイトではこんな入力もありますよね。

• 利用規約に「同意します」にチェックする
• 性別を「男性・女性・その他」から選ぶ
• 趣味を「スポーツ・音楽・映画」などから選ぶ

👉 これらを作るのに使うのが チェックボックス と ラジオボタン です。

チェックボックス（<input type=”checkbox”>）

チェックボックスは、「いくつでも選べる」入力欄です。

たとえば「好きなスポーツを選んでください」という質問を作るとき👇

<p>好きなスポーツを選んでください：</p>
<form>
  <input type="checkbox" name="sports" value="soccer"> サッカー<br>
  <input type="checkbox" name="sports" value="baseball"> 野球<br>
  <input type="checkbox" name="sports" value="basketball"> バスケットボール<br>
</form>

👇ブラウザ表示

💡ポイント

• type=”checkbox” → チェックボックスを作る
• name → 入力のグループ名
• value → チェックしたときに送られる値

✅ 複数チェックできるので、「いくつでもOK」な質問にぴったりです。

ラジオボタン（<input type=”radio”>）

ラジオボタンは、「ひとつだけ選ぶ」入力欄です。

たとえば「性別を選んでください」という質問を作るとき👇

<p>性別を選んでください：</p>
<form>
  <input type="radio" name="gender" value="male"> 男性<br>
  <input type="radio" name="gender" value="female"> 女性<br>
  <input type="radio" name="gender" value="other"> その他<br>
</form>

👇ブラウザ表示

💡ポイント

• type=”radio” → ラジオボタンを作る
• 同じグループにしたい項目は、nameを同じにする！

→ これで「どれか1つだけ」選べるようになります。

チェックボックスとラジオボタンの違い

タグ	選べる数	マークの形	使う場面
checkbox	複数選べる	四角 □	趣味、利用規約など
radio	1つだけ選べる	丸 ○	性別、コース選択など

まとめて使うとこんな感じ

<form action="#" method="post">
  <p>好きなスポーツ：</p>
  <input type="checkbox" name="sports" value="soccer"> サッカー
  <input type="checkbox" name="sports" value="baseball"> 野球
  <input type="checkbox" name="sports" value="basketball"> バスケットボール

  <p>性別：</p>
  <input type="radio" name="gender" value="male"> 男性
  <input type="radio" name="gender" value="female"> 女性
  <input type="radio" name="gender" value="other"> その他

  <p><input type="submit" value="送信"></p>
</form>

👇ブラウザ表示

まとめ

• チェックボックス → いくつでも選べる
• ラジオボタン → ひとつだけ選べる
• どちらも name と value がセットになって動く