【html】ラジオボタンの作り方

ラジオボタン プログラミング

ラジオボタンのベース

ラジオボタンを作るために最低限必要なのは、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>サンプル
サンプル

コメント

タイトルとURLをコピーしました