【HTML】labelタグのfor属性とinputタグのid属性は合わせないとエラーになる

あきぞらです。

HTMLをいじっていて、動かない（押せない） ラジオボタンがありました。

ブラウザのデベロッパーツールでHTMLを見てみると、

以下のような感じに実装されていました。

<input type="radio" name="sampleRadio" value="test1" id="sample1">
<label for="sample1-1">
    ラジオ1： 
</label>
<input type="radio" name="sampleRadio" value="test2" id="sample2">
<label for="sample1-2">
    ラジオ2： 
</label>

パッとみて、何が悪いのか分かりません…。

構文にエラーはなさそうだし、idも被っているわけではない。

しかし、すぐ気が付きました。

labelのfor属性は、inputのidと合わせないといけません。

以下のように修正することで、解決します。

<-- forとidを一致させる -->
<input type="radio" name="sampleRadio" value="test1" id="sample1">
<label for="sample1">
    ラジオ1： 
</label>
<input type="radio" name="sampleRadio" value="test2" id="sample2">
<label for="sample1">
    ラジオ2： 
</label>

割と気が付かないポイントだったので、気を付けましょう！