label forが効かない原因と修正方法
フォームを作るときlabelをクリックすることでinputタグが反応するようにすると利用しやすいですよね。
しかしlabelのforが効いていないようでlabelをクリックしてもinputタグが反応しない？
そんなときに見直す箇所をまとめました「label forが効かない原因と修正方法」を説明します。
結論
labelのforとinputのidが一致していないから
inputのidが2か所あるから
labelの中にinputを含めてしまう
以下で詳しく説明します。
labelのforとinputのidが一致していないから
基本中の基本ですが、labelのforとinputのidの記述は一致している必要があります。
意外とスペルミスしていたり数字がずれていたりするものです。落ち着いてソースを見直してみましょう。
<input type="checkbox" id="aaa"><label for="aaa">クリック</label>inputのidが2か所あるから
同じidの指定が2か所あると一方は効かなくなります。
<input type="checkbox" id="bbb"><label for="bbb">クリック1</label><br>
<input type="checkbox" id="bbb"><label for="bbb">クリック2</label>
上記の場合、下の「クリック2」をクリックしても上の「クリック1」が反応してしまいます。
コピペでソースを書いているときに陥りやすいミスです。
ソース内で検索をかけて重複している箇所がないかチェックしましょう。
labelの中にinputを含めてしまう
そもそもforもidも使わない方法にしてしまおうという話です。
<label><input type="checkbox">クリック</label>labelの中にinputを含めてしまうことでforもidもいらなくなります。
これで「forが効かない!?」と悩む必要がなくなりますし、ソースコードもシンプルになりミスが減ります。
まとめ
labelのforとinputのidが一致していないから
ソースを見直し一致させましょう。
inputのidが2か所あるから
同じidやforを使っていないかソースを見直しましょう。
labelの中にinputを含めてしまう
そもそもforもidも使わなければいいわけです。
以上、label forが効かない原因と修正方法でした。
