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

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

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

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

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

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

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

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

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/27 14:21:02時点 Amazon調べ-詳細)

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;
}

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