プログラミング

【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>

割と気が付かないポイントだったので、気を付けよう!

-プログラミング
-

Copyright© あきぞらブログ , 2020 All Rights Reserved Powered by AFFINGER5.