inputにはtextやtelなどいくつものタイプがありますが、
今回はラジオボタンの作り方と使い方を初心者にもわかりやすく解説していきます。
ラジオボタンの作り方
作り方は簡単で、inputのtypeをtype=”radio”とするだけでラジオボタンの完成です。
<input type="radio" name="example" value="option1" checked>通常ラジオボタンを使用するときは、いくつかの選択肢があって、
その中のどれか一つを選択する際に使うと思います。
そのため、実際には下記のような感じになるでしょう。
<form>
<label>
<input type="radio" name="example" value="option1" checked>
オプション1
</label>
<label>
<input type="radio" name="example" value="option2">
オプション2
</label>
<label>
<input type="radio" name="example" value="option3">
オプション3
</label>
</form>ラジオボタンの使い方
下記をもとに解説していきましょう。
<input type="radio" name="example" value="option1" checked>type="radio"とすることでラジオボタン形式になります。
name属性はラジオボタンをグループ化してそのグループ内で一つだけ選択可能にするものです。
value属性は選択されたオプションの値となり、フォームデータとして送信された時などにこの値が入ります。
またcheckedをつけることで、そのラジオボタンが選択されている状態を初期設定にすることができます。
さらに、何かしらの選択肢を必須にしたい場合はrequiredをつけるといずれかのオプションの選択が必須になります。
ラジオボタングループが複数の場合はどうする？
例えばアンケート画面のように、複数のラジオボタンを配置する場合はどのようなHTMLになるでしょうか？
性別：男性 or 女性、職業：会社員 or その他など、各項目ごとにラジオボタンが複数ある場合です。
一般的にはこのような感じになります。
<form>
<!-- 性別の選択 -->
<h3>性別</h3>
<label>
<input type="radio" name="gender" value="male" required> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label>
<!-- 年齢の選択 -->
<h3>年齢</h3>
<label>
<input type="radio" name="age" value="20s" required> 20代
</label>
<label>
<input type="radio" name="age" value="30s"> 30代
</label>
<!-- 職業の選択 -->
<h3>職業</h3>
<label>
<input type="radio" name="occupation" value="employee" required> 会社員
</label>
<label>
<input type="radio" name="occupation" value="other"> その他
</label>
<!-- 送信ボタン -->
<button type="submit">送信</button>
</form>
各項目ごとに複数の選択肢がある場合、選択肢のグループはname属性でまとめていくといいでしょう。
性別はgender、年齢はageなどとname属性に指定することで、
同じ場所に並んでいても異なるグルーピングが可能です。
Q&A
requiredはどこにつけたらいいんですか？
たしかに複数の選択肢がある中で、requiredはどこに書くべきか悩みますね。
下記のコードをもとに解説します。
<h3>性別</h3>
<label>
<input type="radio" name="gender" value="male" required> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label>上記の場合、”男”の選択肢にrequiredがついています。
基本的に、同じ選択肢グループの最初にくるinputタグにrequiredをつければOKです。
そうすることで、その選択肢グループのいずれかの選択を必須にすることができるので、
上記の場合だと、男あるいは女を選択しないとフォーム送信ができないようにる、というわけですね。
