ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】inputタグを用いてラジオボタンを実装する方法

【HTML】inputタグを用いてラジオボタンを実装する方法

HTML/CSS

2022/02/21

2023/04/20

ラジオボタンは複数用意された選択肢の中からユーザーが一つの項目を選択できるボタンです。

Webサイトにお問い合わせフォームを実装するときや、アプリ内で検索機能を実装するときにラジオボタンを利用します。

Web制作者はラジオボタンを実装できる必要があります。この記事で基本的な実装する方法を覚えましょう！

この記事で身につく内容

inputタグを使ったラジオボタンの実装方法

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

ラジオボタンのサンプル
ラジオボタン実装方法の解説
まとめ

ラジオボタンのサンプル

まずはラジオボタンのサンプルを確認します。

<form>
  <input type="radio" name="site" value="zeroplus">ZeroPlus
  <input type="radio" name="site" value="zeroplus_gate">ZeroPlus Gate
  <input type="radio" name="site" value="zeroplus_media" checked>ZeroPlus Media
  <input type="radio" name="site" value="others" disabled>その他
</form>

出力結果

ラジオボタン実装方法の解説

先程のサンプルをもとにラジオボタン実装方法の解説をします。

ラジオボタンの基本構文

ラジオボタンを実装する際はinputタグを使い、type属性の値をradioにします。

<input type="radio">text

この基本構文に属性を追加し、初期状態でチェックが付いている状態や一時的にチェックをつけられない状態にすることができます。

ラジオボタンの実装で使う属性

name属性

name属性の役割は要素をグループ化することです。

name属性がないとラジオボタンにも関わらず複数選択肢を選択可能になってしまいます。

下記のようにchekboxのグループが複数ある場合は異なるname属性値にします。

<p>サイト</p>
<input type="radio" name="site" value="zeroplus">ZeroPlus
<input type="radio" name="site" value="zeroplus_gate">ZeroPlus Gate
<p>フルーツ</p>
<input type="radio" name="fruit" value="apple">apple
<input type="radio" name="fruit" value="orange">orange
<p>name属性を記述していないと両方選択できてしまう</p>
<input type="radio" value="testA">testA
<input type="radio" value="testB">testB

出力結果

このように「サイトを選択するグループ」と「フルーツを選択するグループ」がある場合、サーバーに正しく情報を伝えるためにもname属性を記述します。

サーバーはname属性に付与されているsiteとfruitの2つグループがあることを認識します。

value属性

value属性の役割は要素をサーバーに伝えることです。

先程のサンプルでは「ZeroPlus Gate」を選択しています。しかし、サーバー側ではvalue属性に入っている「zeroplus_gate」のテキストが選択されたと認識します。

check属性

check属性の役割はデフォルトでチェックをいれることです。

正式な表記はchecked=”checked”ですが、checkedだけでも選択状態にできます。

disabled属性

disabled属性の役割はチェックをつけられないようにすることです。

項目を表示させたいけど、一時的に入力させたくない時に役立ちます。

disabled属性を知らないとJavaScriptを記述して入力できないようにする手法を取ることになります。JavaScirptを書くのは手間がかかるので、是非覚えておきましょう。

テキスト部分をクリック可能にして、使いやすいラジオボタンを作る

初期状態ではラジオボタンの枠しかクリックできません。

近年はスマートフォンなど小さい画面でサイトを表示する機会が増えているため、テキスト部分もクリックできるようにした方が使い勝手が向上します。

テキスト部分をクリック可能にするサンプル

<input name="zp" type="radio" id="zeroplus_media" />
<label for="zeroplus_media">ZeroPlus Media</label>
<input name="zp" type="radio" id="zeroplus" />
<label for="zeroplus">ZeroPlus</label>

出力結果

ZeroPlus Media ZeroPlus

このようにテキスト部分をクリックすることができます。