マンガでわかるホームページ作成

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が効かない原因と修正方法でした。

関連記事