HTMLラジオボタン：nameのグループ・checked・required

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <input type="radio"> は、関連するオプションから 1 つのアイテムを選択するためのラジオボタンを作成します。同じ名前のボタンは同じフォーム内でグループに属します。各オプションには異なる value を付けます。選択されたボタンの name と value のみが送信されます。

グループ名と各ボタンの id を区別する

ボタンは1つのグループで同じ名前を共有しますが、ラベルに関連付けるために使用される各IDは一意でなければなりません。同じ名前の別のボタンを選択すると、以前の選択は解除されます。独立した質問には異なる名前を使用してください。fieldsetとlegendはグループとその質問を提供しますが、fieldsetを単独で分けただけでは、同じ名前のラジオボタンが別の選択グループに分かれるわけではありません。

フォームの所有権もグループ化に影響します：異なるフォーム内で同じ名前のボタンがあっても、必ずしも1つのグループを形成するわけではありません。下の例では、同じフォーム内で果物とスポーツのグループを分けています。

完全な例：2つの質問の値を確認してください

次のドキュメントをradio-demo.htmlとして保存し、ブラウザで開きます。果物の選択は必須ですが、スポーツはデフォルトで野球が選択されています。例では送信を防ぎ、現在の値をページ上に表示するため、サーバーハンドラーは不要です。

<!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="choices">
    <fieldset>
      <legend>果物（必須）</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">リンゴ</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">バナナ</label>
    </fieldset>
    <fieldset>
      <legend>スポーツ</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">サッカー</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">野球</label>
    </fieldset>
    <button type="submit">値を確認</button>
    <button type="reset">初期化</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

初期状態では果物は選択されておらず、野球が選択されています。送信ボタンを押すと、必須の果物選択によって送信が防がれます。
リンゴを選択して送信すると、fruit=appleとsport=baseballが表示されます。送信されるのは表示名「野球」ではなく、valueに指定したbaseballです。
バナナを選択してリンゴをクリアします。サッカーを選択して野球をクリアします。果物の選択は変更されません。
初期化すると、果物は未選択、スポーツは野球に戻ります。すべての選択を解除するのではなく、元のchecked状態を復元します。

checked · required

checked は初期選択のためのブール属性です。checked="false" でも属性は存在しており、false を表現する正しい方法ではありません。初期未選択のオプションでは省略してください。現在の状態を読み取るか、JavaScript の checked プロパティで変更します。

グループ内のいずれかのボタンに required がある場合、そのグループ内で少なくとも1つボタンを選択する必要があります。選択されたボタン自体に required がある必要はありません。ここでは二つのフルーツオプションの両方に付けて、必須であることを明確にしています。

未選択のグループは送信項目に含まれません。選択したボタンにvalueがない場合、既定の文字列onが送られるため、各選択肢を区別できる値を指定します。disabledのボタンは操作・送信対象から除外されます。ブラウザで検証しても、サーバー側で許可された値か再確認してください。

選択をクリアしてキーボードを使用する方法

既に選択されているラジオボタンをクリックしても、チェックボックスのようにクリアされません。ユーザーが「なし」を選ぶ必要がある場合は、それを別の選択肢として設計してください。複数の項目を独立して切り替え可能な質問にはチェックボックスを使用してください。

ラベルを関連付けて、ラベルのテキストをクリックするとオプションが選択されるようにします。ネイティブのキーボード動作を維持してください：Tabキーでグループに移動し、その後矢印キーで移動して選択します。正確なフォーカスの動作はブラウザによって異なる場合があります。MDN のラジオ入力リファレンスには、属性と送信ルールが説明されています。

HTMLリファレンス