サイトのフォームの中などに頻出するラジオボタンを使ったことがない人はいないのではないでしょうか。
便利で頻出するラジオボタンですが、今回はそんな誰もが使ったことのあるラジオボタンを今日からでも作れるように丁寧に解説していきます。
Contents
結論：ラジオボタンは<input type=”radio”>で作る
ラジオボタンはinputタグのtype属性『radio』で作ることが出来ます。
しかし、ラジオボタンを作る時は他にも必要な記述があり、指定をしなくてはいけない属性も複数存在します。
今回はそもそもラジオボタンがどのようなものなのかの解説に加え、ラジオボタンを作るためのコードを一つ一つ解説していきます。
前提：ラジオボタンとは多肢択一のリストである
ラジオボタンとはフォームなどの中で多肢択一のリストとして存在しているものです。
ラジオボタンという名前だけでは分からない人もいるかもしれませんが、いくつかの選択肢の中で一つ選んで答えるような時に使うものになります。
そのため、ユーザーの情報をフォームなどで知るために使用する機会の多いものになります。
今回は上記のようなラジオボタンを作っていきます。
そのためにここからは具体的にラジオボタンを作るためのコードについて解説していきます。
1：inputタグを記述する
まず、ラジオボタンを作るためにはinputタグを記述する必要があります。
下記のコードを見てください。
<input>inputタグをHTMLファイルに記述しました。
この記述を見て気付く方もいるかもしれませんが、inputタグは終了タグを必要としないタグです。
そのため、これから指定する属性などではなく、サイト上に反映されるテキストはinputタグの直後に記述するだけでサイト上に反映されます。
それではここからラジオボタンを作るためにinputタグに指定しなければいけない属性を指定していきます。
2：type属性『radio』を指定する
ラジオボタンを作るためにはinputタグにtype属性『radio』を指定しなければいけません。
下記のコードを見てください。
<input type="radio">inputタグにtype属性『radio』を指定しました。
ラジオボタンには選択肢の横に選択したものを明確にするためのランプのようなものがあるのが特徴になります。
この形式を作るためにはinputタグを使い、そのinputタグにtype属性『radio』を指定する必要があります。
属性と属性値の書き方は基本的なものと変わらず、もし、分からなくなってしまったらclass属性やid属性ではどう書いていたかなどを思い出してみると、理解しやすいです。
この後も、いくつか属性を指定する必要がありますが、ラジオボタンを作る際、属性値が決まっているのはtype属性値のみで、どれも属性値が決まっている訳ではありません。
しかし、属性値は決まっていなくとも、その属性を指定しなけばいけない理由があるため、ここからはその部分を重点的に解説していきます。
3：name属性を指定する
ラジオボタンを作るためにはname属性が必要となってきます。
下記のコードを見てください。
<input type="radio" name="sports">name属性として『sports』を指定しました。
この場で言うnema属性とは、作ったラジオボタンが何の選択肢を選ぶグループなのかを知るための属性になります。
今回はスポーツの中から1つの選択肢を選んでもらうラジオボタンです。そのため、nema属性は『sports』にしました。
どのような選択肢があるラジオボタンを作るかによって、name属性に指定する属性値は変わっていきます。
今回のname属性『sports』を例として、自分の作るラジオボタンのname属性を指定してみて下さい。
次も任意の属性値を指定するvalue属性を指定していきます。
4：value属性を指定する
最後にラジオボタンを作るためにvalue属性を指定していきます。
下記のコードを見てください。
<input type="radio" name="sports" value="soccer">inputタグにvalue属性『soccer』を指定しました。
この場で言うvalue属性とは、選択肢の名前を知るための属性になります。
このinputタグではこの後、『サッカー』という選択肢として表示させるためのタグとして使われます。そのため、value属性を『soccer』としました。
このvalue属性もname属性と同じように属性値は任意に指定するものとなっています。自分の作るラジオボタンの選択しあったvalue属性を指定してください。
ここまででサイトに表示されない部分の記述は終わりとなります。次からはサイトに表示させる部分の記述の方法の解説に移行します。
5：サイトに表示させるテキストを記述する
ここからはサイトに表示させるテキストの記述をしていきます。
下記のコードを見てください。
<input type="radio" name="sports" value="soccer">サッカー
inputタグの直後に『サッカー』を追記しました。
inputタグは先にも記述したように終了タグのないタグになります。そのため、サイトに表示させるテキストはinputタグが記述された直後に記述する必要があります。
今回の選択肢は『サッカー』なので、『サッカー』をinputタグの直後に記述することでサイト上には『サッカー』の選択肢を作ることが出来ました。
このままでは選択肢が『サッカー』しかないことになります。次からはこれ以外の選択肢を増やしていきます。
6：同じ記述方法で選択肢を増やす
選択肢を増やすためには同じ記述方法で新しい選択肢を追加する必要があります。
下記のコードを見てください。
<input type="radio" name="sports" value="soccer">サッカー
<input type="radio" name="sports" value="baseball">野球
<input type="radio" name="sports" value="basketball">バスケットボール
<input type="radio" name="sports" value="swimming">水泳
inputタグを3つ追加し、全てのtype属性、name属性の属性値はサッカーの選択肢と同じですが、value属性はそれぞれ『baseball』、『basketball』、『swimming』の選択肢を増やしました。
この記述によって、新しく『野球』、『バスケットボール』、『水泳』の選択肢を増やすことが出来ました。
先述した解説を理解すると分かりますが、type属性の属性値はそのinputタグをラジオボタンにするために今回は『radio』を指定します。
name属性の属性値はそのラジオボタンの選択肢群が何なのかを知るために今回は『sports』指定します。
そのため、追記した3つの選択肢のtype属性とname属性の属性値はサッカーの選択肢の『radio』、『sports』と同じということになります。
value属性の属性値はそれぞれの選択肢が何を表しているのかを知るためのものなので、それぞれにあった属性値を指定する必要があります。
このようにして選択肢を増やすことで、ラジオボタンを作ることが出来ます。
今回はラジオボタンの作り方を解説していきました。今回はラジオボタンを作る際に最低限必要なものを紹介しましたが、これ以外にも属性などを指定することは可能になります。
ラジオボタンを作る時には今回紹介したものをベースに自分が必要なものに作り変えて、使ってみて下さい。
