HTMLのラジオボタンを設置する方法｜基本からカスタマイズ方法まで

（最終更新日：2023年6月）

✔以下の疑問をお持ちの方へ向けた記事です

「HTMLでラジオボタンはどのように使用するのだろうか？」
「HTMLのラジオボタンの書き方を学びたい」
「HTMLのラジオボタンの具体的な使用例を見て理解したい」

✔この記事を読むことで得られる知識

• HTMLでのラジオボタンの基本的な書き方
• ラジオボタンの応用法
• HTMLでのラジオボタンを用いた具体的な使用例

この記事では、HTMLでのラジオボタンの基本的な使い方から、ラジオボタンのグループ化や値の取得方法など、より実践的な内容も含めて紹介します。

ぜひ最後までお読みください。

HTMLとフォームの基本知識

まずは、HTMLとフォームの基本的な知識について解説します。

ウェブページの構造理解やフォームの機能について深く知る準備をしましょう。

• HTMLとその役割
• フォーム入力の基礎理解

HTMLとその役割

HTML（HyperText Markup Language）は、ウェブページを作成するための言語です。

ウェブページの構造を定義し、その内容を表示します。

例えば、文章の段落、画像、リンク、そして今回の主題であるフォームなど、すべてはHTMLによって形成されます。

フォーム入力の基礎理解

ウェブフォームは、ユーザーからの入力を受け取るための重要なツールです。

これにより、ユーザーはウェブサイトに情報を送信したり、選択を行うことができます。

例えば、ユーザー登録の情報入力、質問回答の選択など、ユーザーとウェブサイトとの対話を実現します。

ラジオボタンの概要

ラジオボタンの全般的な内容を詳細に解説します。

書き方ももちろんですが、その役割などを理解しておきましょう。

• ラジオボタンとは何か
• ラジオボタンの一般的な用途
• ラジオボタンの特性

ラジオボタンとは何か

ラジオボタンは、ユーザーが複数の選択肢から、ひとつだけを選択するためのHTMLフォーム要素です。

その名称は、古いタイプのラジオのことで、同時にひとつのチャンネルだけを選べるようになっていたことから来ています。

ラジオボタンの一般的な用途

ラジオボタンは、ユーザーが複数からひとつだけを選ぶ場面で使われます。

• 性別の選択
• アンケートの回答
• 試験やテスト
• 問い合わせフォームのカテゴリー

その特性上、互いに排他的な選択の選択肢を提示するときに特に有効です。

ラジオボタンの特性

ラジオボタンの特性として、一度選択したラジオボタンを他のラジオボタンを選択することで解除できることが挙げられます。

これはラジオボタンが、選択肢が相互に排他的であるという制約を強制しているからです。

意図して配置すれば、ユーザーからの入力を制御するのに役立ちます。

ラジオボタンのHTMLコード

ここでは、ラジオボタンを作成するためのHTMLコードについて具体的に見ていきましょう。

各属性や使用例を知ることで、自分のウェブページでラジオボタンを効果的に使用する方法がわかります。

• “input”タグの”type=radio”属性
• ラジオボタンの”name”属性
• “value”属性とその役割
• “checked”属性とその用途
• “disabled”とその他の属性
• ラジオボタンの使用例

“input”タグの”type=radio”属性

ラジオボタンをHTMLで作成するには、“input”タグを使用します。

そしてその”type”属性に”radio”を指定することで、ラジオボタンが生成されます。

<form>
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">Option 3</label>
</form>

ラジオボタンの”name”属性

“name”属性は、ラジオボタンをグループ化するために使用されます。

同じ”name”属性を持つラジオボタンはひとつのグループとなり、その中から一つだけ選択できるようになるのです。

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

こちらは「gender」というnameで、ボタンをグループ化しています。

“value”属性とその役割

“value”属性は、ラジオボタンが選択されたときに送信される値を指定します。

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

“checked”属性とその用途

“checked”属性は、ウェブページが読み込まれたときにラジオボタンが初期状態で選択されていることを指定します。

これはユーザーに推奨の選択肢を示すためや、デフォルトの選択を指定するために使用します。

例えば、<input type="radio" name="gender" value="male" checked>とすると、ページが読み込まれた時点で”male”のラジオボタンが選択されています。

<form>
  <input type="radio" id="male" name="gender" value="male" checked>
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

“disabled”とその他の属性

“disabled”属性は、ラジオボタンを無効にするために使用します。

ユーザーが選択できないように指定するためです。

これは以下のような場面で使われます。

• 一時的にユーザーの入力を制限する
• 特定の条件下でのみ選択可能な選択肢を制御する

<form>
  <input type="radio" id="option1" name="options" value="option1" disabled>
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">Option 3</label>
</form>

ラジオボタンの使用例

以下に、実際のHTMLでのラジオボタンの使用例を示します。

<form>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
</form>

これは、ユーザーが性別を選択するためのラジオボタンのグループです。

ラジオボタンは”name”属性によってグループ化されており、それぞれに異なる”value”属性が設定されています。

ラジオボタンの属性一覧

以下は、HTMLのラジオボタンの属性一覧です。

属性名	説明	例文
type	ラジオボタンの種類を指定します。	<input type="radio">
name	ラジオボタンをグループ化するための名前を指定します。	<input type="radio" name="gender">
value	ラジオボタンが選択されたときに送信される値を指定します。	<input type="radio" value="male">
checked	ページが読み込まれた時点でラジオボタンを初期選択状態にします。	<input type="radio" checked>
disabled	ラジオボタンを無効にします。	<input type="radio" disabled>
required	ラジオボタンが必須フィールドであることを指定します。	<input type="radio" required>
form	ラジオボタンを関連付けるフォームのIDを指定します。	<input type="radio" form="myForm">

これらの属性を使用することで、ラジオボタンの動作や表示を制御できます。

ラジオボタンのグルーピング

ラジオボタンをグループ化する方法について詳しく見ていきます。

これにより、複数のラジオボタンをひとつのグループとして扱い、一つだけが選択可能な状態を保持できるのです。

• ラジオボタングループとは何か
• “name”属性によるグルーピングの手法

ラジオボタングループとは何か

ラジオボタンのグループ化は、ユーザーが複数の選択肢からひとつだけを選ぶように制限するための重要な手段です。

グループ化されたラジオボタンの中からは、選択したもの以外の選択肢は自動的に選択解除されます。

これにより、ユーザーが互いに排他的な選択肢から適切に選択を行えるようになります。

“name”属性によるグルーピングの手法

HTMLでは、ラジオボタンをグループ化するために”name”属性が用いられます。

同じ”name”属性を持つラジオボタンを、ひとつのグループとみなすのです。

“name”属性を使用することで、複数のラジオボタンを効果的に管理することができます。

ラジオボタンの見た目を変える：CSSとの連携

こちらでは、CSSとラジオボタンの連携について学びます。

CSSを用いることで、ラジオボタンの見た目を自由にカスタマイズが可能です。

• CSSとは何か？
• CSSを用いたラジオボタンのデザイン変更

CSSとは何か？

CSS（Cascading Style Sheets）は、ウェブページのスタイルを設定するための言語です。

HTMLがウェブページの構造を定義するのに対して、CSSはその見た目を定義します。

例えば以下のようなページ内の要素の見た目を指定することができます。

• フォントの種類
• 色
• 配置
• サイズ

CSSを用いたラジオボタンのデザイン変更

CSSを用いることで、ラジオボタンの見た目をカスタマイズすることが可能です。

例えばラジオボタンのサイズを大きくしたり、色を変更したり、位置を調整したりできます。

/* ラジオボタンのスタイル */
input[type="radio"] {
  /* サイズ */
  width: 20px;
  height: 20px;
}

/* ラジオボタンの外観 */
input[type="radio"]::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
}

/* 選択されたラジオボタンの外観 */
input[type="radio"]:checked::before {
  background-color: #f00;
}

/* ラベルのスタイル */
label {
  margin-left: 5px;
}

これにより、ウェブサイトの全体的なデザインにラジオボタンを合わせることができます。

ラジオボタンの動作を制御：JavaScriptとの連携

JavaScriptを用いて、ラジオボタンの動作を制御してみましょう。

ラジオボタンの選択に応じて特定のアクションを起こすなど、動的なウェブページを作成することができます。

• JavaScriptとは？
• JavaScriptによるラジオボタンの動作制御

JavaScriptとは？

JavaScriptは、ウェブブラウザ上で動作するスクリプト言語です。

ユーザーの操作に反応する動的なウェブページを作成するのが役割のひとつ。

例えばボタンをクリックしたときの挙動や、フォームの入力内容に基づく表示の切り替えなど、ウェブページにインタラクティブ性を持たせることができます。

JavaScriptによるラジオボタンの動作制御

JavaScriptを使用してラジオボタンの動作を制御できます。

例えばラジオボタンが選択されたときに特定の動作を起こすことが可能です。

これは”event listener”という機能を使用しておこなわれ、ラジオボタンの”change”イベントを監視して特定の関数を呼び出します。

これにより、ラジオボタンの選択に基づく動的な表示の切り替えなどを実装できます。

ラジオボタンの利用上の注意事項

こちらでは、ラジオボタンを使用する上での注意点について説明します。

アクセシビリティやデータの安全性など、ラジオボタンを使う際に知っておくべき重要な情報を共有します。

• アクセシビリティと利便性の観点
• フォームデータの安全性について
• “required”属性とフォームの必須項目指定

アクセシビリティと利便性の観点

ラジオボタンは、視覚的に明確で直感的なインターフェースを提供するだけでなく、アクセシビリティも重要な観点です。

例えばラジオボタンには、必ずラベルを提供することで、スクリーンリーダーを使用しているユーザーでも選択肢を理解できるようにします。

また大きなクリック可能なエリアを提供することで、さまざまなデバイスや入力方法に対応できます。

フォームデータの安全性について

フォームから送信されるデータについて、安全性は重要な考慮事項です。

なぜなら通信の方法によっては簡単に情報を盗めるので、あなた本人だけでなく、フォームの入力者にも迷惑がかかるからです。

とくにセンシティブな情報を取り扱う際には、適切なセキュリティ対策をおこないましょう。

例えば、HTTPSを通じた安全な接続を使用したり、サーバーサイドでのデータ検証をおこなったりすることが推奨されます。

“required”属性とフォームの必須項目指定

“required”属性を使用すると、ユーザーが必ず選択するよう促せます。

入力漏れを防ぎたい項目に設定するのが効果的です。

ただしこの属性があると、未記入ではフォームが送信できないため、ユーザーが適切な選択肢を見つけられるよう、選択肢を適切に提示することが重要です。

まとめ：ラジオボタンをHTMLで効果的に利用する方法

ここまでHTMLのラジオボタンの基本的な使い方から、CSSやJavaScriptとの連携、利用上の注意事項までを解説してきました。

ラジオボタンはユーザーにひとつの選択肢を選ばせるための単純で直感的なツールですが、その背後には深い考慮と理解が必要です。

当記事を通じて、ラジオボタンをより効果的に利用するための知識とテクニックを身につけられることを願っています。