Web制作の現場で使えるjQuery　UIデザイン入門 ― 第9回

jQueryによるフォームのデザインの基礎（後編） (1/5)

※この記事は「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行テキスト入力フォームをフォーカスすると、｢必須項目です」と太字で表示される