【HTMLフォーム】ラジオボタンの作り方

今回はお問い合わせフォームなどで見られる、
ラジオボタンの作り方をまとめてみたいと思います。

こんなかんじのサンプルを作ってみました。

See the Pen
OJMvYPQ by notebook (@orange-notebook)
on CodePen.

質問に対してラジオボタンが4つ並んでいて、1つしか選択できないようになっています。
また果物の名前をクリックすると、該当するラジオボタンが選択されます。

では作り方をみていきましょう。

ラジオボタンの作りかた

1：必要なタグ

ラジオボタンを作るには以下の2つのタグが必要です。

inputタグには閉じタグがありません。

またinputタグとlabelタグには必要な属性がいくつかあるので、
もう少し詳しくみていきたいと思います。

<div class="container">
  <form action="">
    <p>1番好きな果物を選んでください。</p>
    <div>
       <input
            type="radio"
            name="fruit"
            id="banana"
            value="banana"
        />
        <label for="banana">バナナ</label>
    </div>
    <div>
        <input
            type="radio"
            name="fruit"
            id="orange"
            value="orange"
        />
        <label for="orange">オレンジ</label>
     </div>
     <div>
        <input
            type="radio"
            name="fruit"
            id="strawberry"
            value="strawberry"
        />
        <label for="strawberry">いちご</label>
      </div>
      <div>
         <input 
             type="radio"
             name="fruit"
             id="grape"
             value="grape"
          />
          <label for="grape">ぶどう</label>
       </div>
    </form>
</div>

2：inputタグに必要な属性

inputタグに必要な属性は以下の4つです。

今回はデモの選択肢となっているバナナを例にみていきたいと思います。

<input type="radio" name="fruit" id="banana" value="banana">

重要な点として、name属性は回答の選択肢の中で共通させる必要があります。

今回の場合、1番好きな果物はという問いなので、name属性は「fruit」としています。
この属性はバナナだけではなく、オレンジ、いちご、ぶどうでも共通です。

name属性を共通にしておかないと、ラジオボタンをクリックしたときに選択できるボタンが複数になってしまいます。
これだと、ラジオボタンにした意味がなくなってしまいますよね。

またvalue属性を設定しておかないと、いずれかのラジオボタンが選択されていたとしても
なんの項目が選択されたのかデータが残らないので、属性の設定が必須になります。

3：labelタグに必要な属性

labelタグには以下の属性が必要です。

for属性はinputタグのid属性と同じ値にすることが必要です。
バナナの項目のHTMLでは以下のようになっています。

<label for="banana">バナナ</label>

これで基本的なラジオボタンの完成です。

最後までお読みいただき、ありがとうございました。

参考：MDN web docs HTML <input type=”radio”>

【HTMLフォーム】セレクトボックスの作り方今回はお問い合わせフォームなどにあるセレクトボックスの作りかたについてまとめてみたいと思います。...

【HTMLフォーム】チェックボックスの作り方今回はお問い合わせフォームなどにあるチェックボックスの作りかたについてまとめてみたいと思います。...