今回はお問い合わせフォームなどで見られる、
ラジオボタンの作り方をまとめてみたいと思います。
こんなかんじのサンプルを作ってみました。
See the Pen
OJMvYPQ by notebook (@orange-notebook)
on CodePen.
質問に対してラジオボタンが4つ並んでいて、1つしか選択できないようになっています。
また果物の名前をクリックすると、該当するラジオボタンが選択されます。
では作り方をみていきましょう。
ラジオボタンの作りかた
1：必要なタグ
ラジオボタンを作るには以下の2つのタグが必要です。
- inputタグ
- labelタグ
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つです。
- type属性(type=”radio”)：
ラジオボタンにするための属性。inputタグのtype属性は種類が多様。 - name属性：
実際にデータが送信されたときに、なんの項目なのか識別するための属性。
選択肢の間で共通させる必要がある。 - id属性：
後述の labelタグと関連付けをさせるための属性。 - value属性：
実際にデータが送信されたときに、選択されたラジオボタンの内容を識別するための属性。
今回はデモの選択肢となっているバナナを例にみていきたいと思います。
<input type="radio" name="fruit" id="banana" value="banana">- type=”radio”
- name=”fruit”
- id=”banana”
- value=”banana”
重要な点として、name属性は回答の選択肢の中で共通させる必要があります。
今回の場合、1番好きな果物はという問いなので、name属性は「fruit」としています。
この属性はバナナだけではなく、オレンジ、いちご、ぶどうでも共通です。
name属性を共通にしておかないと、ラジオボタンをクリックしたときに選択できるボタンが複数になってしまいます。
これだと、ラジオボタンにした意味がなくなってしまいますよね。
またvalue属性を設定しておかないと、いずれかのラジオボタンが選択されていたとしても
なんの項目が選択されたのかデータが残らないので、属性の設定が必須になります。
3：labelタグに必要な属性
labelタグには以下の属性が必要です。
for属性：
inputタグと関連付けさせるための属性
for属性はinputタグのid属性と同じ値にすることが必要です。
バナナの項目のHTMLでは以下のようになっています。
<label for="banana">バナナ</label>属性を「for=”banana”」とすることで、バナナの文字部分をクリックしたとき
対となるバナナのラジオボタンが選択状態になります。
これで基本的なラジオボタンの完成です。
最後までお読みいただき、ありがとうございました。
参考：MDN web docs HTML <input type=”radio”>
