ラジオボタンのベース
ラジオボタンを作るために最低限必要なのは、inputのtype属性をradioとし、value属性に送信したい値を指定することです。
<input type="radio" value="サンプル">
通常、ラジオボタンを設置する際は、2つ以上で、それぞれに名前をつけるので、以下のようになります。
<input type="radio" value="サンプル">サンプル
<input type="radio" value="サンプル2">サンプル2
サンプル
サンプル2
labelタグ
ただし、これだと丸ではなく、名称をクリックした時に反応しないので、label属性を使います。
labelの使い方は2パターンあります。
- inputにid属性をつけて、同じ値をlabelのfor属性に指定する方法
- labelタグで、inputタグを囲む方法
<input id="id1" type="radio" value="サンプル">
<label for="id1">サンプル</label>
<label>
<input type="radio" value="サンプル2">
サンプル2
</label>
グループ分け
inputタグのname属性に値を入れることで、グループ分けを行うことができます。
同じ値の入ったラジオボタンの中で、1つしか選択できないようになります。
<div class="group1">
<input id="id1" type="radio" name="Group1" value="サンプル">
<label for="id1">サンプル</label>
<input id="id2" type="radio" name="Group1" value="サンプル2">
<label for="id2">サンプル2</label>
</div>
<div class="group2">
<label>
<input type="radio" name="Group2" value="サンプル3">
サンプル3
</label>
</div>
デフォルトで指定
最初からチェックを入れておきたい場合には、checkedをつけます。
<input type="radio" value="サンプル" checked>サンプル
サンプル
コメント