このページの本文へ

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

jQueryによるフォームのデザインの基礎(後編)

2009年09月02日 15時30分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「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
サンプル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
サンプル10の実行画面。1行テキスト入力フォームをフォーカスすると、「必須項目です」と太字で表示される
jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング