Web制作の現場で使えるjQuery UIデザイン入門 ― 第9回
jQueryによるフォームのデザインの基礎（後編）
2009年09月02日 15時30分更新
※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第9回です。過去の記事もご覧ください。
（前編からの続き）
3.フォーム部品を選択するセレクター
jQueryには、フォーム部品を選択する専用のフィルター（セレクターの一種）が多数あります。専用フィルターで選択できる要素は、ほとんどの場合、以前に紹介したjQueryのCSSセレクターでも選択できますが、専用フィルターを使うとより簡単です。
■フォーム部品を選択する:input
:inputは、input要素やtextarea要素、select要素、button要素など、すべてのフォーム部品を選択できるフィルターです。
次のサンプルは、いずれかのフォーム部品がフォーカスされると、フォーカスされた要素の背景色をcss()で変更します。フォーカスが外れると、再びcss()で背景色を元の色（初期値）に戻します。背景色に限らず、CSSを初期値に戻すきには、css("background",""); のように、値を設定せずにプロパティ名だけを指定します。
▼サンプル09（スクリプト部分）
$(function(){
$(":input").focus(function(){
$(this).css("background","#DFEEFF");
}).blur(function(){
$(this).css("background","");
})
})
▼サンプル09（(X)HTML部分）
<dl>
<dt>お名前<em>(必須)</em></dt>
<dd><input type="text" name="name" /></dd>
<dt>年齢</dt>
<dd>
<select name="age">
<option>選択してください</option>
<option value="10代">10代</option>
<option value="20代">20代</option>
<option value="30代">30代</option>
<option value="40代以上">40代以上</option>
</select>
</dd>
<dt>コメント</dt>
<dd>
<textarea name="comment"></textarea>
</dd>
<input type="reset" value="リセット" />
<input type="submit" value="送信" />
<button>確認</button>
</dl>
▼サンプル09（実行結果）
 |
|---|
| サンプル09の実行画面。フォーカスしたフォーム部品の背景色が青色になる |
■1行テキスト入力フォームを選択する:text
:textは、type属性の値が「text」に設定されているinput要素（1行テキスト入力フォーム）だけを選択するフィルターです。
次のサンプルでは、1行入力フォームがフォーカスされると後ろに「<storng>必須項目です</strong>」という(X)HTMLを追加し、フォーカスが外れるとstrong要素を取り除きます。
▼サンプル10（スクリプト部分）
$(function(){
$(":text").focus(function(){
$(this).after("<strong>必須項目です</strong>");
}).blur(function(){
$("strong").remove();
})
})
▼サンプル10（(X)HTML部分）
お名前：<input type="text" name="name" />
▼サンプル10（実行結果）
 |
|---|
| サンプル10の実行画面。1行テキスト入力フォームをフォーカスすると、｢必須項目です」と太字で表示される |
