htmlにて選択ボタンを作成する場合には、チェックボックスやラジオボタンがありますが、今回はラジオボタンの作成方法の説明になります。
チェックボックスは通常複数選択可能な場合に使用しますが、ラジオボタンはどれか１つを選択したいような時に使用します。
目次
１．基本パターン
ラジオボタンの作成例としては以下のようになります。
<input type="radio" name="color" value="red">赤 <input type="radio" name="color" value="blue">青
input要素にて作成し、typeを「radio」にします。
nameによって、どのラジオボタンが同じグループに属するかが決定されるため、2者択一、三者択一のボタンを作成したい場合にはnameを同じものにします。
valueは値を分けることでどのボタンが押されたのかを区別するために使用します。
javascriptなどで値を見て判断します。
２．文字列クリックでも反応させる方法
また、＜label＞と結びつけることでラジオボタンだけでなく文字列クリックにより反応させることができます。
これによりラジオボタンのみクリックに比べると操作性がかなりよくなります。
文字列クリックにても反応させる場合は以下のようにラジオボタンのinput要素をlabelで囲みます。
文字列クリック無反応
<input type="radio" name="color">赤
文字列クリック反応
<label>
<input type="radio" name="color">赤
</label>
文字列を離れたところに置く場合などでlabelで囲めないような場合には、以下のように<label for="">と<input id="">を使用します。
<label for="color">と<input id="color">をあわせることで、どのlabelがどのinputに対応いしているか指定します。
文字列クリック反応
<label for="color">赤</label>
<div>
<input type="radio" name="color" id="color">
</div>
３．初期選択しておく方法
初期状態でどれか1つを選択状態にしておきたい場合には、checked="checked"を使用します。
以下の例では、「赤」ボタン側にchecked="checked"を指定しておくことで初期状態で「赤」ボタンを選択状態にしておくことができます。
<input type="radio" name="color" value="red" checked="checked">赤
<input type="radio" name="color" value="blue">青
４．どれか1つを必ず選択させる方法
さらに、requiredを指定することでどれか1つを必ず選択させるということができます。
requiredはinput要素のすべてに入れておいてもいいですし、以下ようにどれか1つに入っている状態でもＯＫです。
<form>
<label>
<input type="radio" name="color" value="red" required> 赤
</label>
<label>
<input type="radio" name="color" value="blue"> 青
</label>
<button type="submit">決定</button>
</form>
上記のようにrequiredを指定した場合、無選択のままで「決定」ボタンをクリックすると「どれか１つを選択してください」というようなメッセージが表示されます。
以上がラジオボタン作成方法の説明になります。
関連記事：
【HTML Javascript】ローカルストレージへのデータ保存方法 - Django Girls and Boys 備忘録
【Django】Djangoでのhtml（javascript）側からpython（views.py）側へ値を送る時の方法の一例 - Django Girls and Boys 備忘録
【HTML input要素】ラジオボタンを作成する方法 - Django Girls and Boys 備忘録
【Windows10】ブラウザがEdgeやChromeに変わった後のインターネットオプションを開く方法 - Django Girls and Boys 備忘録
【Python】キーボード、キー入力判定方法 - Django Girls and Boys 備忘録
【Python】keyboardライブラリでのキー入力検出に使用可能なキーの種類 - Django Girls and Boys 備忘録
【PythonからWeb操作】seleniumのインストール手順 - Django Girls and Boys 備忘録
【PythonによるExcelファイルの読み書き】PythonのダウンロードからExcelファイルの読み書きまでの一通りすべての方法 - Django Girls and Boys 備忘録
【Python Selenium】ｆ文字列（フォーマット文字列）、ｒ文字列（raw文字列）について - Django Girls and Boys 備忘録
【Python】エスケープシーケンス（エスケープ文字）について - Django Girls and Boys 備忘録
