閉じる

HTMLラジオボタンの作り方｜基本の書き方からバリデーションまで実例で解説

広告

Webフォームにおいて、複数の選択肢から一つだけを選んでもらう際に欠かせないのがラジオボタンです。

ユーザーが迷わずに操作できるインターフェースを構築することは、サイトのコンバージョン率や利便性を向上させるために非常に重要です。

本記事では、HTMLを用いたラジオボタンの基本的な作成方法から、実務で使える高度なバリデーションの実装、デザインのカスタマイズまで詳しく紹介します。

最新のWeb標準を意識した記述方法を学び、より使いやすいフォーム制作に役立ててください。

目次 [ close ]
  1. ラジオボタンの基本的な作り方
    1. 重要な属性の意味と役割
    2. labelタグによるアクセシビリティの向上
  2. ラジオボタンをグループ化する際の注意点
    1. fieldsetとlegendによる構造化
  3. よく使われる便利な属性
    1. checked属性で初期選択を設定する
    2. disabled属性で選択を無効化する
  4. HTML5によるバリデーションと必須設定
    1. JavaScriptを使用したカスタムバリデーション
  5. ラジオボタンのデザインをカスタマイズする（CSS）
    1. accent-colorプロパティによる簡易カスタマイズ
    2. 外見を完全に自作する手法
  6. ラジオボタンとセレクトボックスの使い分け
  7. まとめ

ラジオボタンの基本的な作り方

HTMLでラジオボタンを作成するには、<input>タグのtype属性に"radio"を指定します。

ラジオボタンは単体で使用されることは少なく、通常は複数の選択肢を一つのグループとして扱います。

まずは、最もシンプルな構成のコード例を見てみましょう。

HTML
<form>
  <p>お好きなフルーツを選んでください：</p>
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">りんご</label>

  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">バナナ</label>

  <input type="radio" id="orange" name="fruit" value="orange">
  <label for="orange">オレンジ</label>
</form>
実行結果
お好きなフルーツを選んでください：
( ) りんご  ( ) バナナ  ( ) オレンジ

重要な属性の意味と役割

ラジオボタンを正しく機能させるためには、いくつかの属性を理解しておく必要があります。

特に重要なのは、name属性、value属性、id属性の3つです。

属性名役割
type=”radio”入力要素をラジオボタンとして定義します。
nameグループ化のために必須の属性です。同じ名前を持つボタンが同一グループと見なされます。
valueサーバーに送信される値を指定します。ユーザーには見えませんが、バックエンド処理で重要です。
id各要素を識別するための固有のIDです。主にlabelタグとの紐付けに使用します。

labelタグによるアクセシビリティの向上

ラジオボタンを作成する際、<label>タグの使用は避けて通れません。

<label>タグのfor属性と、<input>タグのid属性を一致させることで、テキスト部分をクリックしてもボタンを選択できるようになります。

クリックできる範囲（ヒットエリア）が広がるため、特にモバイルデバイスにおける操作性が劇的に向上します。

アクセシビリティの観点からも、スクリーンリーダーが項目名を正しく読み上げるために不可欠な設定です。

ラジオボタンをグループ化する際の注意点

ラジオボタンの最大の特徴は、「グループ内で一つしか選べない」という排他的な選択機能です。

この機能を有効にするには、すべての選択肢のname属性を共通の値にする必要があります。

HTML
<!-- 正しいグループ化 -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

<!-- 誤ったグループ化（別々のグループになってしまう） -->
<input type="radio" name="option1" value="yes"> はい
<input type="radio" name="option2" value="no"> いいえ

fieldsetとlegendによる構造化

複数のラジオボタンを一つのまとまりとしてマークアップする場合、<fieldset>タグと<legend>タグを使うのがベストプラクティスです。

これにより、フォーム内のセクションが論理的に区切られ、ユーザーやブラウザにとって理解しやすい構造になります。

HTML
<fieldset>
  <legend>配送希望時間帯</legend>
  <p>
    <input type="radio" id="morning" name="delivery_time" value="morning">
    <label for="morning">午前中</label>
  </p>
  <p>
    <input type="radio" id="afternoon" name="delivery_time" value="afternoon">
    <label for="afternoon">午後</label>
  </p>
</fieldset>

<legend>タグの内容は、そのグループ全体が何を指しているのかを示す見出しの役割を果たします。

よく使われる便利な属性

ラジオボタンには、挙動を制御するための便利な属性がいくつか用意されています。

これらを活用することで、ユーザーの入力手間を省いたり、誤操作を防いだりすることが可能です。

checked属性で初期選択を設定する

あらかじめ特定の項目を選択状態にしておきたい場合は、checked属性を付与します。

ユーザーに最も選ばれる可能性が高い項目や、推奨される選択肢に設定しておくのが一般的です。

HTML
<input type="radio" name="plan" value="standard" checked>
<label>スタンダードプラン（おすすめ）</label>

disabled属性で選択を無効化する

在庫切れや条件を満たしていない場合など、特定の選択肢を選ばせたくないときにはdisabled属性を使用します。

無効化されたラジオボタンはクリックできなくなり、見た目もグレーアウトされるのが一般的です。

HTML
<input type="radio" name="color" value="blue" disabled>
<label>ブルー（在庫なし）</label>

HTML5によるバリデーションと必須設定

フォーム送信時に、ユーザーがいずれかのラジオボタンを必ず選択するように強制したい場合があります。

この場合、グループ内の少なくとも一つの<input>要素にrequired属性を記述します。

HTML
<form>
  <p>アンケートにご協力ください（必須）：</p>
  <input type="radio" id="q1_yes" name="survey" value="yes" required>
  <label for="q1_yes">満足</label>
  
  <input type="radio" id="q1_no" name="survey" value="no">
  <label for="q1_no">不満</label>
  
  <button type="submit">送信</button>
</form>

required属性が付与されたグループのいずれも選択されていない状態で送信ボタンが押されると、ブラウザが自動的に警告を表示します。

JavaScriptを記述しなくても、基本的な入力チェックが行えるため非常に便利です。

JavaScriptを使用したカスタムバリデーション

より詳細なエラーメッセージを表示したい場合や、動的なチェックを行いたい場合はJavaScriptのValidityStateオブジェクトを活用します。

以下の例では、未選択時にカスタムメッセージを表示する方法を示します。

JavaScript
// 送信時のバリデーション例
const form = document.querySelector('form');
const radios = document.getElementsByName('survey');

form.addEventListener('submit', (event) => {
  let isChecked = false;
  for (const radio of radios) {
    if (radio.checked) {
      isChecked = true;
      break;
    }
  }

  if (!isChecked) {
    alert('項目を一つ選択してください。');
    event.preventDefault(); // 送信をキャンセル
  }
});

ラジオボタンのデザインをカスタマイズする（CSS）

デフォルトのラジオボタンはブラウザごとに見た目が異なり、サイトのデザインと合わないことがあります。

以前はラジオボタンのカスタマイズは非常に困難でしたが、現在のモダンブラウザではCSSのみで柔軟に変更可能です。

accent-colorプロパティによる簡易カスタマイズ

最も簡単に色を変更する方法は、accent-colorプロパティを使用することです。

これだけで、チェック時のメインカラーを指定した色に変更できます。

CSS
input[type="radio"] {
  accent-color: #cf2e2e; /* ブランドカラーなどを指定 */
}

外見を完全に自作する手法

丸い形自体を変更したり、独自のアニメーションを加えたりする場合は、デフォルトの表示を隠して疑似要素（::before, ::after）で作成します。

基本的な手順は以下の通りです。

  1. appearance: none; を使用してデフォルトのスタイルを消去する。
  2. widthとheightを指定し、border-radius: 50%;で円を作る。
  3. :checked疑似クラスを用いて、選択時のスタイルを定義する。
CSS
/* 独自デザインの例 */
input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}

input[type="radio"]:checked {
  border-color: #cf2e2e;
}

input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #cf2e2e;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

このようにCSSを適用することで、サイトの世界観に合わせたラジオボタンを作成できます。

フォーカス時のスタイル（outlineなど）も忘れずに設定することで、キーボード操作ユーザーへの配慮も行いましょう。

ラジオボタンとセレクトボックスの使い分け

UI設計において、ラジオボタンを使うべきか、ドロップダウン形式のセレクトボックス（<select>）を使うべきか迷うことがあります。

一般的には、以下の基準で判断するのが適切です。

要素名推奨されるケース
ラジオボタン選択肢が2〜5個程度と少なく、一目で全項目を確認させたい場合。
セレクトボックス都道府県の選択など、選択肢が非常に多く、画面スペースを節約したい場合。

ラジオボタンは、すべての選択肢が常に可視化されているため、ユーザーの認知負荷が低いという利点があります。

比較検討が必要な項目や、重要な決断を促す項目にはラジオボタンが適しています。

まとめ

HTMLのラジオボタンは、シンプルながらも多くの属性やテクニックが詰まった重要な要素です。

適切なname属性の設定によるグループ化、labelタグによるアクセシビリティの確保、そしてrequired属性を用いたバリデーションは、モダンなWeb制作において必須のスキルと言えます。

さらに、CSSを用いたカスタマイズを取り入れることで、ユーザー体験を損なうことなく美しいフォームを構築できるでしょう。

今回紹介した基本構造や実装例を参考に、ぜひ実務のプロジェクトで最適なラジオボタンを実装してみてください。

正しいマークアップと洗練されたデザインの両立が、質の高いWebサイト制作の第一歩となります。

URLをコピーしました！