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行テキスト入力フォームをフォーカスすると、｢必須項目です」と太字で表示される |
「まとめて読みたい！」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。
Web制作の現場で使う
jQueryデザイン入門
本体 3,330円＋税、B5変形判344ページ（オール4色刷）
ISBN978-4-04-868411-8
この連載の記事
- 最終回 実務で使えるjQueryプラグイン3選
- 第25回 制作現場で役立つjQueryプラグインの使い方
- 第24回 jQueryとAjaxで作るスムーズページング
- 第23回 jQuery＋CSSによるカルーセルパネルの作り方
- 第22回 jQueryでバリデーション付きメールフォームを作ろう
- 第21回 jQueryで自作するフローティングウィンドウ
- 第20回 jQueryによるLightbox風モーダルウィンドウの作り方
- 第19回 jQueryで作る多階層ドロップダウンメニュー
- 第18回 IE6対応！jQueryで透過PNGのロールオーバーを作る
- 第17回 jQueryでロールオーバー！プリロード対応版
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
