HTMLのformのラジオボタン、チェックボックスで、文字をクリックした時にチェックを入れる方法

ボタンだけでなく、ラジオボタンやチェックボックスの項目をクリックした時にチェックを入れたり、外したりするには

labelタグでforを使います。
[adsense]

概要

フォームのラジオボタンやチェックボックスでは、通常、ボタンそのものをクリックしないとチェックが入りませんが、項目（文字）をクリックした時にもチェックを入れるようにします。

inputタグのidと、labelタグのforを一致させます。

<input type=”radio” id=”hoge”><label for=”hoge”>選択肢</label>

ラジオボタン

サンプル

普通のラジオボタン。

項目もクリッカブルなラジオボタン

htmlソース

<form>
 <input type="radio" name="rdbtn" value="1">ラジオボタンの項目１
 <input type="radio" name="rdbtn" value="2">ラジオボタンの項目２
 <input type="radio" name="rdbtn" value="3">ラジオボタンの項目３
</form>

<form>
 <input type="radio" name="rdbtn2" id="rbtn1" value="1">
  <label for="rbtn1">ラジオボタンの項目１</label>
 <input type="radio" name="rdbtn2" id="rbtn2" value="2">
  <label for="rbtn2">ラジオボタンの項目２</label>
 <input type="radio" name="rdbtn2" id="rbtn3" value="3">
  <label for="rbtn3">ラジオボタンの項目３</label>
</form>

チェックボックス

サンプル

普通のチェックボックス。

選択肢もクリッカブルなチェックボックス。

htmlソース

<form>
 <input type="checkbox" name="ckbx1" value="1">チェックボックスの選択肢１
 <input type="checkbox" name="ckbx1" value="2">チェックボックスの選択肢２
 <input type="checkbox" name="ckbx1" value="3">チェックボックスの選択肢３
</form>

<form>
 <input type="checkbox" name="ckbx2" value="1" id="chk1">
  <label for="chk1">チェックボックスの選択肢１</label>
 <input type="checkbox" name="ckbx2" value="2" id="chk2">
  <label for="chk2">チェックボックスの選択肢２</label>
 <input type="checkbox" name="ckbx2" value="3" id="chk3">
  <label for="chk3">チェックボックスの選択肢３</label>
</form>