28. 10月 2012 · Write a comment · Categories: WEB制作 · Tags: , ,

Trust Form のチェックボックスやラジオボタンに、label タグが入っていなかった件で、そこを弄ったついでに設定した内容です。

チェックボックスなどだけにクリックエリアが効いているだけでは非常に押しにくいため、テキストを <label> で囲ってやる必要があります。ちなみに、IE6の場合は input に id を設定し、label に for=”id名” と設定してあげないと有効になりません。制作側の手間を増やしてくれる、マゾには嬉しいブラウザです。

IE6 の場合:
<label for=”chk1″><input type=”checkbox” name=”chk1″ id=”chk1″ vaue=”めっけら” /> めっけら<label>

IE7移行 の場合:
<label><input type=”checkbox” name=”chk1″ vaue=”もっけら” /> もっけら<label>

さて、上記のようにテキスト部分を囲ってやるだけでもいいのですが、もう一歩踏み込んでもっとわかりやすくしてみましょう。例えばこんなふうに↓

スマートフォンの UI に便利な jQueryMobile のスタイルまで行かなくても、クリックエリアと選んだ選択肢はわかりやすくなりますね。大前提として、チェックボックスは複数選択できますが、ラジオボタンは1つのみです。これを jQuery と CSS で料理します。

javascript (jQuery) 

WordPress で jQuery を使いたい場合は  jQuery(document).ready(function($) { … }); の中に上記のような命令を書けば良いですね。

選択済みの選択肢に label-checked クラスを設定し、クリックした時の挙動を入れています。type の複数取得の記述は…動いてますがちと自信ナス。

HTML

span で囲むのはどちらでも構わないです。ある程度 label で対応できるので。上の例だと、最初の選択肢がすでに選択済みの状態なので、javascript によって label に CSS のクラスが設定されています。

CSS

Trust Form を作成すると div.contact-form で囲まれます。その中の label 近辺を修飾しています。好みに応じてもうちょっとボタンらしくしても良いかと。

こんな感じで EFO にもオススメなので、お試しください。


コメントを残す

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

CAPTCHA