HTMLでinput要素だけを使ってチェックボックスやラジオボタンを作ると、クリック可能な範囲は、チェックボックスやラジオボタンそのものだけです。その横に書いた文字列はクリックできません。
しかし、input要素にid属性でid名を加えた上で、label要素を使えば、ラベル部分（文字列の部分）もクリック可能になります。こうしておく方が、一般的なソフトウェア上のチェックボックスやラジオボタンと操作が同じになるので、ユーザビリティ上も良さそうです。
例えば、以下のような感じ。

上記のサンプルでは、1つめのチェックボックスは、チェックボックスそのものしかクリックできません。隣の文字列をクリックしても何も起こりません。でも、2つめのチェックボックスは、チェックボックスの隣にある文字列をクリックすることでも、チェックのON/OFFが可能です。

まあ、こんな感じで、チェックボックスをチェックしやすくすることができます。HTMLで。

視覚的にも分かりやすくしたい

ただ、これだと視覚的にクリック可能な範囲が分かりにくそうです。（いや、一般的なソフトでも分かりにくいことに変わりはありませんが。）
もうちょっと、「クリック可能な範囲」を分かりやすくする装飾を加えたい気がします。
例えば、以下のように。

上図のように、「チェックボックスのラベルの上にマウスが載ったとき」に、ラベルそのものの範囲が明確になるように装飾すると、クリック可能範囲が分かりやすくなります。

Internet Explorerの場合は、ラベルの上にマウスを載せると、チェックボックスの縁が変色したりするのでよく分かるのですが、Firefoxの場合は何も変化しないので、本当にクリック可能なのかどうかがイマイチ把握できません。ですから、上図のように、マウスが載ったときに、そこがラベルであるという事実を伝える装飾が加わっていると、分かりやすいんじゃないかと思います。

というわけで、そんな装飾を実現するHTML＆スタイルシートソースは以下の通り。

<form>
   <input type="checkbox" value="1" name="c1" id="c1" /><label for="c1">チェックボックス1のラベル</label><br />
   <input type="checkbox" value="1" name="c2" id="c2" /><label for="c2">チェックボックス2のラベル</label><br />
   <input type="checkbox" value="1" name="c3" id="c3" /><label for="c3">チェックボックス3のラベル</label><br />
</form>

上記のHTMLでは、チェックボックスを3つ作っています。（チェックボックスを作る）input要素の直後に（ラベルを作る）label要素を置いて「チェックボックスのラベル」を作っています。「チェックボックス」と「ラベル」の対応は、「input要素のid属性の値」と「label要素のfor属性の値」を同じにすることで取れます。
そして、以下のようにスタイルシートを記述します。

label:hover {
   background-color: #ffcccc;
}

スタイルシートは非常に単純です。ラベルを作るlabel要素のhover疑似クラスに対して背景色を付加するだけです。これで、ラベルの上にマウスが載ったときに、背景色を変化させることができます。（上記の場合は、「淡い赤色（#ffcccc）」です。）

実際に表示させると、以下のようになります。

ただし、Internet Explorer6以下では、hover疑似クラスがリンク以外に使えないのでこの装飾は使えません。（使っても無視されるだけで問題は起こりませんが。）
IE7以降や、その他のモダンブラウザ向けの装飾ですね。

まあ、フォームをちょっと分かりやすくする程度の装飾なので、「リンク以外の場所でhover疑似クラスが使えない」環境で閲覧されても、特に問題にはならないでしょう。この装飾が有効な環境でだけででも使えれば、それでいいんじゃないかと思います。