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

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

チェック！！

 <input id="check" name="check" type="checkbox" value="チェック">チェック！！

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

◯<label >

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




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