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

HTML
2025.10.04

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

前回の記事では、「名前・メール・メッセージ」を入力できる基本的なHTMLフォームを作りました。

そこで今回はその続きとして、
HTMLフォームのチェックボックスやラジオボタンを使った「選ぶ入力フォーム」の作り方を解説します。

実際のWebサイトでは、
文字を書く入力だけでなく、「選ぶ入力」もたくさん使われています。

「選ぶ入力」とは？

まず、「選ぶ入力とはどんなものかを整理してみましょう。

これまで作ってきたフォームは、
文字を書くタイプの入力でした。

一方で、Webサイトでは次のような入力もよく見かけますよね。

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

このような入力を作るときに使うのが
👉チェックボックスとラジオボタンです。

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

まずはチェックボックスから見ていきましょう。

HTMLフォームのチェックボックスは、
「いくつでも選べる」入力欄を作るときに使います。

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

<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複数選べる □趣味、利用規約など
radio1つだけ選べる ○性別、コース選択など

👉️
「たくさんOKならチェックボックス」
「一つだけならラジオボタン」
と覚えると迷いません。

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

最後に、チェックボックスとラジオボタンを
ひとつのフォームにまとめた例を見てみましょう。

<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 がセットになって動く

“書く入力”に続いて、“選ぶ入力”もマスターできたね！

次回は、
フォームをもっと見やすく・使いやすくする 「デザイン編」です✨️
CSSを使って、入力欄やボタンを整え、
プロっぽいフォームに仕上げていきましょう！

コメント