ラジオボタンの文字をクリックして選択できるのなんで？を調べてみた。

ありますよね。
ラジオボタンの文字をクリックしても選択できたり、
インプットタブの文字をクリックしたら、入力バーが表示されたりするやつ。

あれってどうやってんのかなーと調べてみました。

結果、<label>を使えばいい。

あっさり答えが見つかりました。便利なタグがあるもんですね。
２パターンの実装方法があったので、それを学んで終了です。

①labelのfor属性とinputのid属性を一致させる。

<div>
<label for="egg">卵アレルギーはありますか？</label>
<input type="checkbox" name="egg" id="egg">
</div>

②inputをlabelで囲む

<label>卵アレルギーはありますか？
 <input type="checkbox" name="egg">
</label>

注意点

ラベルのなかにヘッダー要素は厳禁。
ラベルがヘッダーの見出しとして表示する機能を妨げるそうです。
ラベルも使いたいけどヘッダーっぽく表示したいという場合には
<label>要素をCSSで編集しましょう。

<a>,<input type="button" value="任意のvalue">や<button>を
ラベル要素で囲むのは厳禁です。
それぞれの機能がラベル要素とバッティングして働かなくなります。

以上！<label>の使い方と注意点でした。

参考記事

<label>