HTMLでフォームを作っているとき、ある問題に直面しました。
それはチェックボックスを普通に設置しただけだと全体がクリックできないということ
この問題で悩んだ経験がある人も多いのではないでしょうか。
ということでテキストも含めて全体でクリックできるようにするテクニックを紹介します。
ダメなチェックボックスの例
まず初めに全体がクリックできないダメなチェックボックス例について簡単に説明します。
例えば分かりやすいのは出すなら次のようなHTML例
|
1 2 3 4 5 |
<form> <input type="checkbox">Apple<br> <input type="checkbox">Banan<br> <input type="checkbox">Cherry<br> </from> |
これはチェックボックスのボックス部分しかクリックできません。
つまり「Apple」とか「Banana」とか「Cherry」の文字列部分をクリックしても無反応です。
具体的にどのような動作になるかは次のCodePenを参照
See the Pen 全体がチェックできないチェックボックスの例 by ぴー助 (@pisuke-code) on CodePen.
実際にクリックしてみると確かにテキスト部分が反応しない音が分かります。
こういう風に全体がクリックできないとフォームを利用する人が戸惑う原因になるのでユーザビリティに良くありません。
チェックボックス全体をクリック可能にする
ではチェックボックス全体をクリック可能にするにはどうすればいいか・・・
その解決策は単純にlabelタグでクリックさせたい要素を囲むだけです。
例えば次のように
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <label> <input type="checkbox">Apple </label><br> <label> <input type="checkbox">Banan </label><br> <label> <input type="checkbox">Cherry<br> </label><br> </from> |
これでテキスト部分も含めてクリックできるようになります。
実際の動作については次のCodePenで確かめてみてください。
See the Pen 全体がチェックできるチェックボックスの例 by ぴー助 (@pisuke-code) on CodePen.
今度は「Apple」とかのテキスト部分をクリックしてもチェックが付くようになりました。
もちろんチェックボックスだけなくラジオボタンでも同じことができます。
例えば次のようにすればlabelタグで囲った全体をラジオボタン化することが可能
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <label> <input type="radio">Apple </label><br> <label> <input type="radio">Banan </label><br> <label> <input type="radio">Cherry<br> </label><br> </from> |
ということでチェックボックス全体をクリック可にさせるテクニックについてでした。
利用者が迷わないような親切なフォーム作りには欠かせないテクだと思います。
ではでは($・・)/~~~
