テキストをクリックしてもチェックできるようにする【label for=”aaa”】

チェックボックスだけでなく、その次のテキストをクリックしてもチェックできるようにする方法を紹介します。

◯普段通りにコーディングすると、、、

チェック!!

 <input id="check" name="check" type="checkbox" value="チェック">チェック!!
「チェック!!」をクリックしてもボックスにチェックが入りません。パソコンならこれでもそれほどチェックしにくくないのですが、スマホやタブレットなど指でチェックするデバイスだとなかなか反応せずにイライラしそうです。  

◯<label for=”check”>を使うと、、、



<input id="check" name="check" type="checkbox" value="チェック"><label for="check">チェック!!</label>
テキストをクリックしても、チェックが入るようになりました。今回はidとforを「check」にしましたが、idとforの値が同じなら別のものでも動きます。

これならスマホやタブレットでも押しやすいですね。チェックボックスを使うフォームを作成する際にはぜひ参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です