フォームの選択肢を作りたいけれど、チェックボックスとラジオボタンのどちらを使うか迷っていませんか。見た目だけで選ぶと、「1つだけ選んでほしいのに複数選べる」「チェックした内容と届く値が違う」といった問題が起こります。
まずは複数・独立した選択にはcheckbox、同じ質問から1つ選ぶならradioと整理しましょう。そのうえで、項目名のname、送る値のvalue、最初の選択状態を決めるcheckedを分けて考えると、コードの意味を追いやすくなります。
この記事では、HTMLの基本的なタグを学び始めた方に向けて、使い分けから必須入力、選択結果の確認までを解説します。後半の練習コードはHTMLファイルとして保存して試せます。サーバーを用意せず、選び方によってデータがどう変わるかを確かめることが目標です。
- チェックボックスとラジオボタンの使い分け
checked・name・valueの役割と書き方- 選択結果がフォームで送信される仕組み
- label・fieldset・legend・requiredの組み合わせ方
- 選択や送信が想定どおりにならないときの確認順
チェックボックスとラジオボタンの違い
最も大きな違いは、利用者が選べる個数です。
| 比較項目 | チェックボックス | ラジオボタン |
|---|---|---|
| typeの値 | checkbox | radio |
| 選択できる数 | 0個・1個・複数 | 同じグループから最大1個 |
| 主な用途 | 興味分野、同意、機能のオン・オフ | 支払い方法、プラン、配送方法 |
| 選択後の操作 | 個別に選択・解除できる | 別項目へ変更できる。同じ項目を押しても解除されない |
複数選択または項目ごとの独立したオン・オフならcheckbox、同じ質問から1つだけ選ぶならradioと考えると選びやすくなります。
チェックボックスの選択ルール
「興味のある分野をすべて選んでください」のように、複数の答えを同時に選べる質問ではチェックボックスを使います。「利用規約に同意する」のような1項目のオン・オフにも適しています。
ラジオボタンの選択ルール
「支払い方法を1つ選んでください」のように、同時に2つ以上は選べない質問ではラジオボタンを使います。この記事のように同じフォーム内に置く場合、同じ空でないnameを持つradioが1グループになり、別の項目を選ぶと以前の選択が外れます。最初は未選択にもできます。
入力部品は見た目ではなく、利用者に許可する選択ルールから決めます。「複数・独立」ならcheckbox、「同じ質問から1つ」ならradioが基本です。
checkbox・radioの基本構文
どちらも入力部品を表すinput要素で作り、種類を指定するtype属性の値を変えます。属性とは、開始タグの中に書く追加の設定です。次の短い例はフォーム内へ置く部品を示しています。
<label>
<input type="checkbox" name="topics" value="html">
HTML
</label><label>
<input type="radio" name="plan" value="basic">
ベーシックプラン
</label>| 属性 | 役割 | 例 |
|---|---|---|
type | checkboxかradioかを指定 | type="checkbox" |
name | 送信する項目名を指定 | name="plan" |
value | 選択時に送信する値を指定 | value="basic" |
checked | 最初から選択された状態にする | checked |
id | labelのforと関連付ける識別子 | id="plan-basic" |
input要素全体の基本は、HTMLのinputタグとtype・name・valueの書き方で詳しく解説しています。
inputの終了タグとlabelの役割
inputは内容や終了タグを持たない「空要素」なので、</input>という終了タグは使いません。選択肢の説明はlabel要素で関連付けます。
チェックボックスの書き方
1項目のオン・オフを作る
メールマガジンを受け取るかどうかなど、1つの設定を切り替える例です。
<label>
<input type="checkbox" name="newsletter" value="yes">
メールマガジンを受け取る
</label>選択されていればnewsletter=yesが送信されます。選択されていない場合、この項目自体が送信データへ含まれません。
複数の項目を選べるようにする
関連する複数のチェックボックスには、同じnameと異なるvalueを指定できます。
<fieldset>
<legend>興味のある分野を選んでください</legend>
<label>
<input type="checkbox" name="topics" value="html">
HTML
</label>
<label>
<input type="checkbox" name="topics" value="css">
CSS
</label>
<label>
<input type="checkbox" name="topics" value="javascript">
JavaScript
</label>
</fieldset>HTMLとCSSを選ぶと、同じnameに対して複数の値が送られます。
topics=html&topics=css補足として、topics[]のような名前で複数の値をひとまとめに受け取る書き方もあります。ただし、角括弧を特別な記号として扱うかどうかは受信するプログラムによります。HTMLでは、同じ名前の組を選択した数だけ送信する点を押さえましょう。
ラジオボタンの書き方
同じnameで1つのグループを作る
同じ質問に属するradioへ、同じnameを指定します。
<fieldset>
<legend>プランを選んでください</legend>
<label>
<input type="radio" name="plan" value="basic">
ベーシック
</label>
<label>
<input type="radio" name="plan" value="pro">
プロ
</label>
</fieldset>radioを1つだけ選べるグループにする基準は、idではなく同じnameです。nameが異なると別グループになり、両方を同時に選べてしまいます。
idとvalueは各選択肢で変える
idはページ内で重複しない値にし、labelのforと一致させます。valueも、受信側でどの選択肢か区別できる値にします。
<input type="radio" id="plan-basic" name="plan" value="basic">
<label for="plan-basic">ベーシック</label>
<input type="radio" id="plan-pro" name="plan" value="pro">
<label for="plan-pro">プロ</label>radioの排他選択はname、labelとの関連付けはidとforが担当します。似た属性でも役割が違うため、分けて確認しましょう。
name・valueと送信データの関係
フォーム送信では、選択された入力部品のname（項目名）とvalue（値）が1組のデータになります。たとえばtopics=htmlは「topicsという項目の値がhtml」という意味です。画面に表示するlabelの文字は、そのまま送られるわけではありません。
選択状態と送信の有無
次のフォームで「HTML」と「プロ」を選んだとします。
<input type="checkbox" name="topics" value="html">
<input type="checkbox" name="topics" value="css">
<input type="radio" name="plan" value="basic">
<input type="radio" name="plan" value="pro">この例の組を項目名=値で書き、&でつなぐと次の形です。実際の送信形式はフォームの設定によって変わります。
topics=html&plan=pro| 画面上の状態 | 送信結果 | 補足 |
|---|---|---|
| checkboxを選択 | name=valueを送信 | 複数選択なら同名の組を繰り返す |
| checkboxを未選択 | 項目を送信しない | 空文字やfalseではない |
| radioを1つ選択 | 選択した1組を送信 | 同じnameの他の値は送信しない |
| radioを未選択 | 項目を送信しない | requiredなら送信前に検証される |
未選択のcheckboxはfalseや空文字を送るのではなく、その入力部品のnameとvalueの組は送信されません。受信側では「項目がない場合」を未選択として扱う設計が必要です。
画面のチェック状態だけでなく、実際の送信データに項目が存在するかまで設計します。未選択を明示的なfalseとして保存したい場合は、受信側で変換してください。
valueを省略した場合の値
次のようにvalueを省略したcheckboxまたはradioが選択されると、既定値としてonが送信されます。
<input type="checkbox" name="newsletter">newsletter=on受信側で選択肢を判別できるよう、checkboxとradioには原則としてvalueを明示します。
checkboxの送信動作はMDNのcheckboxリファレンス、radioのグループと値はMDNのradioリファレンスでも確認できます。
checked属性で初期選択を指定する
最初から選択された状態にしたい場合は、checked属性を付けます。
<label>
<input type="checkbox" name="newsletter" value="yes" checked>
メールマガジンを受け取る
</label>radioでは、同じグループのうち初期選択にする1項目だけへ付けます。
<label>
<input type="radio" name="plan" value="basic" checked>
ベーシック
</label>
<label>
<input type="radio" name="plan" value="pro">
プロ
</label>checkedは論理属性
checkedは、属性が存在すること自体に意味がある論理属性です。
checked="false"と書いても属性が存在するため、初期選択は解除されません。選択しない状態にするなら、checked属性そのものを削除します。
<!-- 正しい指定：初期選択になる -->
<input type="checkbox" checked>
<!-- 誤った指定：falseと書いても初期選択になる -->
<input type="checkbox" checked="false">
<!-- 初期選択にならない -->
<input type="checkbox">初期状態・現在状態・リセットの違い
HTMLに書いたchecked属性は初期状態を示します。利用者がクリックして選択を変えても、HTMLの属性を書き換えるわけではありません。送信に使われるのは操作後の現在の状態です。JavaScriptで現在の状態を読むときは、入力部品のcheckedプロパティ（状態を持つ値）を確認します。
JavaScriptで初期値を書き換えていないこのページの例では、フォームをリセットするとHTMLのcheckedで指定した初期状態へ戻ります。後半の練習例で、選択変更とリセットを試せます。
同じradioグループの複数項目へcheckedを書くと、通常のHTMLの読み込みでは、ソース上で最後にcheckedが付いた項目が選択されます。意図を明確にするため、1グループにつき1項目だけにします。
label・fieldset・legendで選択肢を分かりやすくする
checkboxとradioには、選択肢の意味を示すlabelを関連付けます。labelの文字もクリックできるようになるため、小さな入力部品だけを狙う必要がなくなります。
labelはforとidを一致させる
<input type="checkbox" id="topic-html" name="topics" value="html">
<label for="topic-html">HTML</label>for="topic-html"とid="topic-html"を一致させます。詳しい関連付け方は、HTMLのlabelタグとfor・idの書き方も参考にしてください。
関連する選択肢はfieldsetでまとめる
複数の選択肢を1つの質問として扱う場合は、fieldsetで囲み、legendへグループの質問を書きます。
<fieldset>
<legend>連絡方法を選んでください</legend>
<input type="radio" id="contact-email" name="contact" value="email">
<label for="contact-email">メール</label>
<input type="radio" id="contact-phone" name="contact" value="phone">
<label for="contact-phone">電話</label>
</fieldset>labelは各選択肢の名前、legendはグループ全体の質問を伝えます。HTMLのfieldset・legendタグによるグループ化もあわせて確認すると役割を整理できます。
requiredで選択を必須にする
requiredを付けると、選択されていない場合にブラウザーの入力チェックを働かせられます。ただし、radioとcheckboxでは意味が異なります。
| 入力部品 | requiredの意味 | 注意点 |
|---|---|---|
| 同じnameのradio | グループ内で1つ選ぶ | 1項目にrequiredがあればグループが必須になる |
| 1つのcheckbox | その項目を選ぶ | 規約同意などに向く |
| 複数のcheckbox | requiredを付けた各項目を選ぶ | 「どれか1つ」とは異なる |
radioグループを必須にする
<fieldset>
<legend>支払い方法を選んでください</legend>
<label>
<input type="radio" name="payment" value="card" required>
クレジットカード
</label>
<label>
<input type="radio" name="payment" value="bank">
銀行振込
</label>
</fieldset>同じnameのradioは、1項目にrequiredがあればグループ全体が必須になります。上の例では、requiredのない「銀行振込」を選んでも条件を満たします。実際に作るときは、後から必須項目と分かるよう、同じグループの全項目にrequiredを付けると管理しやすくなります。
checkboxのどれか1つを必須にする場合
複数のcheckboxのすべてにrequiredを付けると、すべての項目が必須になります。「3つのうちどれか1つ」を求める条件にはなりません。この条件には、選ばれた数を数えるJavaScriptなどの追加処理が必要です。実際に公開するフォームでは、受信するサーバー側でも条件を確認します。
<label>
<input type="checkbox" name="agree" value="yes" required>
利用規約に同意する
</label>単独の同意チェックなら、上のようにrequiredを使えます。入力チェック全体は、required・minlength・maxlength・patternの書き方で詳しく解説しています。MDNのrequired属性リファレンスにもradioとcheckboxの違いが記載されています。
任意回答と「指定なし」の選択肢
radioは未選択で始められますが、一度選ぶと、同じグループ内のradio操作だけではすべて未選択へ戻せません。回答が任意で撤回もできるようにするなら、同じnameの「指定なし」を選択肢へ加えます。次は追加する選択肢の例です。「指定なし」を選ぶとcontact_time=noneが送信されるため、項目自体が送られない未選択とは別の状態です。
<label>
<input type="radio" name="contact_time" value="none" checked>
指定なし
</label>任意回答のradioには「指定なし」などの戻り先を用意します。初期状態だけでなく、選択した後に変更・撤回できるかまで考えましょう。
選択結果を確かめる練習コード
次のコード全体を1つのHTMLファイルとして保存すると、選んだ項目のname=valueを画面で確認できます。サーバーには送信しない練習用です。末尾のJavaScriptは結果表示を助けるためのもので、まずはinputの属性と結果の対応を見てください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>選択結果を確かめる</title>
</head>
<body>
<h1>選択結果を確かめる（送信しません）</h1>
<form id="choice-demo">
<fieldset>
<legend>興味のある分野（複数選択・任意）</legend>
<label><input type="checkbox" name="topics" value="html" checked> HTML</label>
<label><input type="checkbox" name="topics" value="css"> CSS</label>
<label><input type="checkbox" name="topics" value="javascript"> JavaScript</label>
</fieldset>
<fieldset>
<legend>学習プラン（1つ選択・必須）</legend>
<label><input type="radio" name="plan" value="basic" required> ベーシック</label>
<label><input type="radio" name="plan" value="pro" required> プロ</label>
</fieldset>
<p><label><input type="checkbox" name="agree" value="yes" required> 練習用の確認に同意する（必須）</label></p>
<button type="submit" disabled>選択結果を表示する</button>
<button type="reset">初期状態に戻す</button>
</form>
<pre id="result" aria-live="polite">ここに項目名と値を表示します。</pre>
<noscript>結果表示にはJavaScriptを有効にしてください。</noscript>
<script>
const form = document.querySelector('#choice-demo');
const result = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault(); // ページ移動やサーバー送信を止める
const pairs = Array.from(new FormData(form), ([name, value]) => {
return name + '=' + value;
});
result.textContent = pairs.join('\n');
});
form.addEventListener('reset', () => {
result.textContent = 'ここに項目名と値を表示します。';
});
// 送信を止める処理の準備後に、表示ボタンを有効にする
form.querySelector('button[type="submit"]').disabled = false;
</script>
</body>
</html>FormData(form)は、フォームから送信対象になる項目を集める仕組みです。この例では1組ずつ改行して表示するため、同じnameの複数の値も見落としません。MDNのFormDataコンストラクターで詳しい扱いを確認できます。
テキストエディターにコード全体を貼り、UTF-8でchoice-demo.htmlとして保存します。Windowsのメモ帳では「すべてのファイル」を選び、末尾に.txtが付かないよう確認します。macOSのテキストエディットでは「標準テキストにする」を選びます。
保存したファイルをブラウザーへドラッグするか、「ファイルを開く」で選びます。「選択結果を確かめる（送信しません）」の見出しと選択肢が出れば準備完了です。コードが文字のまま出る場合は、拡張子が.htmlか確認してください。表示ボタンが押せないままなら、コード末尾の</script>までコピーできているか確認し、保存して開き直してから次へ進みます。
最初に「初期状態に戻す」を押します。HTMLだけが選択済み、プランと同意は未選択の状態から、下の表を上から順に試してください。選択を変えるだけでは表示欄は更新されないため、結果を見るときは「選択結果を表示する」を押します。
| 試す操作 | 期待する結果 |
|---|---|
| リセット後、そのまま表示する | プランの入力チェックで止まる。「プロ」だけ選んでもう一度押すと、同意の入力チェックで止まる。 |
| プロと同意を選んで表示する | HTMLは初期選択済み。topics=html、plan=pro、agree=yesの3行になる。 |
| CSSも選んで表示する | topics=cssの行が増える。topics=htmlと両方が残る。 |
| 興味分野をすべて外して表示する | topicsの行がなくなる。planとagreeの2行だけになる。 |
| 「初期状態に戻す」を押す | HTMLだけ選択済み、プランと同意は未選択に戻る。表示欄は「ここに項目名と値を表示します。」へ戻る。 |
3行・4行・2行の結果を順に確認でき、最後のリセットで選択と表示欄が初期状態へ戻れば、この練習は完了です。結果が違う場合は先へ進まず、リセットして表の上から選択をやり直してください。HTMLを書き換えたときは保存してブラウザーを再読み込みし、もう一度リセットしてから確認します。
この練習ではブラウザー内の選択結果まで確認できます。フォームを実際に公開する場合は、送信先のaction、送信方法のmethod、受信するプログラムを別途用意します。基本構造はHTMLのform・input・label・buttonの違いも参考にしてください。
disabledと送信データ
選択済みでも、操作を無効にするdisabledが付いた入力部品は、標準のフォーム送信データに含まれません。練習例のFormDataでも同じです。
<input type="checkbox" name="option" value="archive" checked disabled>画面でチェックが見えていても、disabledの入力部品は送信されません。ブラウザーの値は書き換えられるため、固定したい値や利用者の権限は受信するサーバー側で判断します。MDNのdisabled属性リファレンスで対象要素と送信時の扱いを確認できます。
:checkedで選択中の見た目を調整する
CSSも試したい場合は、選択中の入力部品に一致する:checkedを使えます。次のHTMLを練習ファイルの</form>の直後へ置き、CSSは<head>内に<style>と</style>で囲んで追加します。この選択肢はフォームの外に置く見た目の練習用なので、先ほどの結果表示には含まれません。
<label class="choice">
<input type="checkbox" name="topics" value="html">
<span>HTML</span>
</label>.choice input:checked + span {
color: #536048;
font-weight: 700;
background-color: #f2d89c;
}このCSSの+は「すぐ後ろにある同じ階層の要素」を選ぶ記号です。チェックすると、inputの直後のspanにある「HTML」が太字になり、背景色が付きます。選択状態を色だけで伝えず、ネイティブの入力部品や文字の変化も確認できる状態にします。キーボードのフォーカス表示も消さないようにしましょう。詳しい構文はMDNの:checked擬似クラスで確認できます。
選択・送信が想定どおりにならないとき
checkboxやradioが想定どおり動かないときは、画面だけで判断せず、HTMLと送信データを順番に確認します。
radioを複数選べてしまう
同じ質問のradioに別々のnameを付けると、別グループとして扱われます。複数を同時に選べる場合は、同じnameか確認します。
選択結果がonになる
受信した値がすべてonになる場合は、各選択肢へ異なるvalueを指定します。labelの表示文字は自動的に送信値にはなりません。
ラベルを押しても選択できない
inputとlabelを別々に書いた場合は、forとidが完全に一致するか、idが重複していないかを確認します。inputをlabelで囲む書き方なら、inputがlabelの内側に入っているかを確認します。どちらも正しいのに反応しない場合は、disabledが付いていないかも見てください。
選択した項目がデータに現れない
次の順で切り分けます。
- 送信時点で実際に選択されているか
nameが付いているかdisabledになっていないか- 同名の値が受信側で上書きされていないか
- まず本記事の練習例で項目名と値の組を確認し、実際のフォームでは受信したデータと照合したか
HTMLのcheckedと画面の状態が違う
HTMLのchecked属性は初期状態です。ブラウザーが前回の選択状態を復元する場合もあるため、この練習では「初期状態に戻す」を押してから比べます。JavaScriptで現在状態を扱う場合は、element.checkedプロパティを確認します。属性と現在状態の違いはMDNのcheckedプロパティでも確認できます。
よくある質問
- 複数のcheckboxからどれか1つをrequiredにできますか？
-
HTMLの
requiredだけでは「複数のうち最低1つ」という条件を直接表せません。各checkboxに付けると、その項目ごとに必須になります。JavaScriptで入力を助け、サーバー側でも選択数を検証してください。 - radioは最初から1つ選んでおく必要がありますか？
-
HTML上は未選択で開始できます。回答を撤回できる任意項目では、「指定なし」を含めると操作が明確です。ただし、これは「指定なし」の値を送る選択であり、何も送らない未選択とは異なります。必須項目なら
requiredを使い、初期選択が利用者の意思決定を不当に誘導しないかも検討します。 - checkboxにも同じnameを付けてよいですか？
-
はい。関連する複数checkboxへ同じ
nameと異なるvalueを付けると、選択された数だけ同名の組が送信されます。受信側が複数値をどのように扱うかも確認してください。 - valueに日本語を書いてもよいですか？
-
書けますが、内部データとして扱いやすく、表記変更の影響を受けにくい短い識別値を使う方法が一般的です。画面表示はlabelへ日本語で書き、
value="pro"のように送信値を分けると管理しやすくなります。 - checked=”false”で未選択になりますか？
-
なりません。
checkedは論理属性なので、値がfalseでも属性が存在すれば初期選択になります。未選択にするにはchecked属性を削除します。 - checkboxを1つだけ選べるようにしてもよいですか？
-
JavaScriptで制御することはできますが、同じ質問から1つだけ選ばせる目的ならradioが適しています。利用者が予想できる標準的な入力部品を選びましょう。
まとめ
チェックボックスとラジオボタンは、選択できる個数と解除方法が異なります。実装するときは、次の順で考えると整理しやすくなります。
- 複数・独立した選択ならcheckbox、1つだけの排他選択ならradioを選ぶ
nameへ項目名、valueへ受信側で区別できる値を付ける- radioは同じ質問の選択肢で
nameを統一する - 初期選択が必要な場合だけ
checkedを付ける - label・fieldset・legend・requiredを目的に合わせて組み合わせる
- 選択状態だけでなく実際の送信データを確認する
とくに、未選択のcheckboxが送信されないことと、valueを省略するとonになることは見落としやすい点です。画面に見えるラベル、HTMLの属性、受信するname=valueの3つを対応させ、分かりやすく扱いやすいフォームを作りましょう。
まずは練習例で「複数選択」「未選択」「初期状態へのリセット」を試してみてください。期待する結果と一致すれば、自分のフォームでも選択ルールと項目名・値を対応させて書けるようになります。
目的別に次の記事を選ぶ
選択部品をフォーム全体へ組み込むときは、次の記事でform・input・label・buttonの役割を確認してください。
