フォームのチェックボタンをテキストクリックしてもチェックできるようにする

About HTML

フォームのラジオボタンやチェックボタンはテキストをクリックしても選択できるようにすることがユーザーに優しいと思います。

対応するチェックボックスやラジオボタンにそれぞれ <label> で囲ってあげるだけで、テキストまでチェック ON / OFF の対象にできる。「このフォーム要素に対応するラベルだよ」と指示してあげる感じです。

ラベル <label> タグの有無でテキスト選択の有無に違い

<label> タグは、フォームの入力項目それぞれの「ラベル(項目名)」を書くための HTML の作法なのですが、これをちゃんと使うとフォームの使い勝手がガラッと変わる。

label タグ無しだとテキストはチェック範囲対象にはならない

チェック1

チェック2

label タグが在るとテキストもチェック範囲対象になる

さらにマウスオンでポインタも変更してあげると優しい

CSS レイアウトで「cursor: pointer;」でマウスオン時にリンク先にカーソルが乗った時のようにポインタに切り替わるように設定してあげると優しいです。

ここでは style を使って label に直指定していますが、別途 CSS ファイルに記述したほうが良いでしょう。


以上です。

コメントを残す

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