Web開発まとめチェックボックス全体をクリック可能にする簡単テクニックHTMLでフォームを作っているとき、ある問題に直面しました。それはチェックボックスを普通に設置しただけだと全体がクリックできないということこの問題で悩んだ経験がある人も多いのではないでしょうか。いうことでテキストも含めて全体でクリックできるようにするテクニックを紹介します。このページの目次ダメなチェックボックスの例チェックボックス全体をクリック可能にするダメなチェックボックスの例まず初めに全体がクリックできないダメなチェックボックス例について簡単に説明します。type="checkbox">Cherry<br></from>これはチェックボックスのボックス部分しかクリックできません。「Apple」とか「Banana」とか「Cherry」の文字列部分をクリックしても無反応です。CodePen.実際にクリックしてみると確かにテキスト部分が反応しない音が分かります。いう風に全体がクリックできないとフォームを利用する人が戸惑う原因になるのでユーザビリティに良くありません。チェックボックス全体をクリック可能にするではチェックボックス全体をクリック可能にするにはどうすればいいか・・・その解決策は単純にlabelタグでクリックさせたい要素を囲むだけです。type="checkbox">Cherry<br></label><br></from>これでテキスト部分も含めてクリックできるようになります。実際の動作については次のCodePenで確かめてみてください。CodePen.今度は「Apple」とかのテキスト部分をクリックしてもチェックが付くようになりました。チェックボックスだけなくラジオボタンでも同じことができます。type="radio">Cherry<br></label><br></from>ということでチェックボックス全体をクリック可にさせるテクニックについてでした。利用者が迷わないような親切なフォーム作りには欠かせないテクだと思います。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信していく予定。PHP、JavaScript(jQuery)、CSSがメイン。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですCommentName*Email*Website上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。未分類JavaScriptjQueryPHPCSSWordPressこんなアプリも作ってます。3Dドット絵メーカー(オープンベータ版)3Dドット絵(ボクセルアート)を作れるアプリ。個人でWebサービスとかツールとかを開発しているWeb系の人。このブログでは学んだことや開発に役立つ知識、プログラマーや開発者向けの情報を発信しています。2020.02.26Androidで簡単にシェア(共有)機能実装。