jQueryによるフォームのデザインの基礎（後編）-优快云博客

（前編からの続き）

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>必須項目です」という(X)HTMLを追加し、フォーカスが外れるとstrong要素を取り除きます。

▼サンプル10（スクリプト部分）


$(function(){
    $(":text").focus(function(){
        $(this).after("<strong>必須項目です</strong>");
    }).blur(function(){
        $("strong").remove();
    })
})

▼サンプル10（(X)HTML部分）


お名前：<input type="text" name="name" />

■パスワード入力フォーム部品を選択する:password

　:passwordは、type属性の値が「password」のinput要素（パスワード入力フォーム）だけを選択するフィルターです。

次のサンプルでは、パスワード入力フォームがフォーカスされると、input要素の後ろに「パスワードは6文字以上で入力してください」という(X)HTMLを追加します。フォーカスが外れると、p要素を取り除きます。

▼サンプル11（スクリプト部分）


$(function(){
    $(":pass").focus(function(){
        $(this).after("<p>パスワードは6文字以上で入力してください</p>");
    }).blur(function(){
        $("p").remove();
    })
})

▼サンプル11（(X)HTML部分）


パスワード：<input type="password" name="pass" />

▼サンプル11（実行結果）


サンプル03の実行画面。パスワード入力フォームをフォーカスすると、「パスワードは6文字以上で入力してください」と表示される

■ラジオボタンを選択する:radio

　:radioは、type属性の値が「radio」に設定されているinput要素（ラジオボタン）だけを選択するフィルターです。

　次のサンプルでは、ラジオボタンがクリックされると、ラジオボタンと対になるlabel要素（ラジオボタンのid属性と同じ値をfor属性に持つlabel要素）を太字に変更します。また、label要素がクリックされた場合も、クリックされたlabel要素を太字にします。

　なお、以前にチェックを入れたラジオボタンが太字のままにならないように、クリックイベントの処理の最初に $("label").css("font-weight","") として、すべてのlabel要素のfont-weightプロパティをいったん初期値に戻しています。

▼サンプル12（スクリプト部分）


$(function(){
    $(":radio").click(function(){
        $("label").css("font-weight","")
        $("label[for='"+$(this).attr("id")+"']").css("font-weight","bold")
    })
    $("label").click(function(){
        $("label").css("font-weight","")
        $(this).css("font-weight","bold")
    })
})

▼サンプル12（(X)HTML部分）


性別:
<input type="radio" name="gender" value="男性" id="gender_man" />
<label for="gender_man">男性</label>
<input type="radio" name="gender" value="女性" id="gender_woman" />
<label for="gender_woman">女性</label>

▼サンプル12（実行結果）


サンプル12の実行画面。ラジオボタンを選択すると対応するラベルを太字にする

【実務でハマる落とし穴】

「change() じゃダメ？」

　実はサンプル12は、フォームの値の変更を感知するchange()を使って、もっと簡単に書くことができます。

▼サンプル13（スクリプト部分）


$(function(){
    $(":radio").change(function(){
        $("label").css("font-weight","")
        $("label[for='"+$(this).attr("id")+"']").css("font-weight","bold")
    })
})

　ところがこのプログラム、残念ながらInternet Explorer（IE）では望みの結果が得られません。

　先に説明したとおり、changeイベントは、該当するフォーム部品からフォーカスが外れたタイミングで値が変更されたかどうかを確認します。FirefoxやSafariは、ラジオボタンがクリックされると、クリックされた要素が一瞬フォーカスされた後すぐにフォーカスが外れます。ところが、IEの場合はラジオボタンをクリックしただけではラジオボタンにフォーカスが残り、改めてほかの要素をクリックしなければフォーカスが外れません。そのため、意図したとおりにchangeイベントの処理は動作しない、というわけです。

Read more: http://ascii.jp/elem/000/000/456/456040/#ixzz20PlgqBNu

■チェックボックスを選択する:checkbox

　:checkboxは、type属性の値が「checkbox」のinput要素（チェックボックス）だけを選択できるフィルターです。

　次のサンプルは、button要素がクリックされると、すべてのチェックボックスのchecked属性の値を「checked」に変更してチェックを入れます。

▼サンプル14（スクリプト部分）


$(function(){
    $("button").click(function(){
        $(":checkbox").attr("checked","checked")
    })
})

▼サンプル14（(X)HTML部分）


スキル:
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>
<p><button>すべてにチェックを付ける</button></p>

▼サンプル14（実行結果）


サンプル14の実行画面。「すべてにチェックを入れる」と書かれたボタンをクリックすると、すべてのチェックボックスにチェックが入る

■送信ボタンを選択する:submit

　:submitは、type属性の値が「submit」または「images」のinput要素（送信ボタン）を選択するフィルターです。

次のサンプルでは、送信ボタンにマウスが重なったときに、「入力した内容をサーバーに送信します」という(X)HTMLを追加し、送信ボタンからマウスが外れるとp要素を削除します。

▼サンプル15（スクリプト部分）


$(function(){
    $(":submit").mouseover(function(){
        $(this).after("<p>入力した内容をサーバーに送信します</p>")
    }).mouseout(function(){
        $("p").remove()
    })
})

▼サンプル15（(X)HTML部分）


<dl>
    <dt>お名前<em>(必須)</em></dt>
    <dd><input type="text" name="name" /></dd>
    <dt>コメント</dt>
    <dd>
        <textarea name="comment"></textarea>
    </dd>
    <dd><input type="submit" value="送信" /></dd>
</dl>

▼サンプル15（実行結果）


サンプル06の実行画面。送信ボタンにマウスカーソルを重ねると「入力した内容をサーバーに送信します」と表示される

■イメージボタンを選択する:image

　:imageは、type属性の値が「image」のinput要素（イメージボタン）だけを選択するフィルターです。

　次のサンプルでは、イメージボタンにマウスカーソルが重なるとsrc属性を「button_on.jpg」に変更し、ボタンから外れると「button.jpg」に戻します。

▼サンプル16（スクリプト部分）


$(function(){
    $(":image").mouseover(function(){
        $(this).attr("src","button_on.jpg")
    }).mouseout(function(){
        $(this).attr("src","button.jpg")
    })
})

▼サンプル16（(X)HTML部分）


<dl>
    <dt>お名前<em>(必須)</em></dt>
    <dd><input type="text" name="name" /></dd>
    <dt>コメント</dt>
    <dd>
        <textarea name="comment"></textarea>
    </dd>
    <dd><input type="image" src="button.jpg" alt="送信" /></dd>
</dl>

Read more: http://ascii.jp/elem/000/000/456/456040/#ixzz20Pm421Pa

■リセットボタンを選択する:reset

　:resetは、type属性の値が「reset」のinput要素（リセットボタン）だけを選択するフィルターです。

次のサンプルでは、リセットボタンが押されたときに「入力内容を初期化しました」という(X)HTMLをボタンの後ろに挿入します。ボタンを押すたびに(X)HTMLが繰り返し挿入されないように、one() を使って一度だけ実行されるようにしています。

▼サンプル17（スクリプト部分）


$(function(){
    $(":reset").one("click",function(){
        $(this).after("<p>入力内容を初期化しました</p>")
    })
})

▼サンプル17（(X)HTML部分）


<form action="#">
    <dl>
        <dt>お名前<em>(必須)</em></dt>
        <dd><input type="text" name="name" /></dd>
        <dt>コメント</dt>
        <dd>
            <textarea name="comment"></textarea>
        </dd>
        <dd><input type="reset" value="リセット" /></dd>
    </dl>
</form>

▼サンプル17（実行結果）


サンプル17の実行画面。リセットボタンを押すと一度だけ「入力内容を初期化しました」と表示する

【更新履歴】サンプル17のHTMLの一部を修正しました（2012年3月29日）。

■ボタンを選択する:button

　:buttonは、button要素を選択するフィルターです。

　button要素は、submit要素のようにクリックされるとform要素のaction属性に記述されたURLにフォームデータを送信します。次のサンプルでは、2つのinput属性に入力された値をif文を使ってチェックし、値が異なる場合にはem要素に「メールアドレスが異なります。」と書き込み、return false; でフォームの送信を中止します。

▼サンプル18（スクリプト部分）


$(function(){
    $(":button").click(function(){
        if($("input[name='mail']").val() != $("input[name='check']").val()){
            $("em").text("メールアドレスが異なります。");
            return false;
        }
    })
})

▼サンプル18（(X)HTML部分）


<form action="check.html">
    <dl>
        <dt>メールアドレス</dt>
        <dd><input type="text" name="mail" /></dd>
        <dt>メールアドレス<em>(確認)</em></dt>
        <dd><input type="text" name="check" /></dd>
        <dd><button>確認</button></dd>
    </dl>
</form>

▼サンプル18（実行結果）


サンプル18の実行画面。2つのフォームの内容をチェックし、一致しない場合はエラーを表示する

■ファイル選択フォームを選択する:file

　:fileは、type属性の値が「file」のinput要素（ファイル選択フォーム）を選択するフィルターです。

次のサンプルでは、ファイル選択フォームにマウスカーソルを重ねると、「アップロードできるファイルは300kbまでです」という(X)HTMLを挿入します。マウスカーソルが外れると、挿入したp要素は取り除きます。

▼サンプル19（スクリプト部分）


$(function(){
    $(":file").mouseover(function(){
        $(this).after("<p>アップロードできるファイルは300kbまでです</p>")
    }).mouseout(function(){
        $("p").remove()
    })

▼サンプル19（(X)HTML部分）


写真：<input type="file">

Read more: http://ascii.jp/elem/000/000/456/456040/#ixzz20PmSOw8T

■チェックの入っているフォーム部品を選択する:checked

　:checkedは、ラジオボタンやチェックボックスでチェックが入っている要素だけを選択できます。

　下記のサンプルでは、label要素もしくはチェックボックスがクリックされたときに、チェックが入っているチェックボックスと対になるlabel要素の背景色を灰色に変更します。

▼サンプル20（スクリプト部分）


$(function(){
    $("label,:checkbox").click(function(){
        $("label").css("background","")
        $(":checked").each(function(){
            $("label[for='"+$(this).attr("id")+"']").css("background","#CCC")
        })
    })
})

▼サンプル20（(X)HTML部分）


スキル:
<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />
<label for="xhtml">XHTML</label>
<input type="checkbox" name="css" value="CSS" id="css" />
<label for="css">CSS</label>
<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />
<label for="javascript">JavaScript</label>
<input type="checkbox" name="php" value="PHP" id="php" />
<label for="php">PHP</label>

▼サンプル20（実行結果）


サンプル20の実行画面。チェックが入っているチェックボックスと対になるlabel要素の背景色を変更する

■選択されている要素を選択する:selected

　:selectedは、セレクトボックスで選択されている要素だけを選択できます。

　次のサンプルでは、セレクトボックスの値が変更された場合に、選択されている要素を調べ、その要素のvalue要素が「10代」の場合には、input要素のdisabled属性の値をdisabled（使用不可）に変更します。

▼サンプル21（スクリプト部分）


$(function(){
    $("select").change(function(){
        if($(":selected").attr("value")=="10代"){
            $("input").attr("disabled", "disabled");
        }else{
            $("input").removeAttr("disabled");
        }
    })
})

▼サンプル21（(X)HTML部分）


<p>年齢：
<select name="age">
    <option value="選択してください">選択してください</option>
    <option value="10代">10代</option>
    <option value="20代">20代</option>
    <option value="30代">30代</option>
    <option value="40代以上">40代以上</option>
</select></p>
<p>好きなお酒：<input type="text" /></p>

▼サンプル21（実行結果）


サンプル21の実行画面。10代を選ぶと「好きなお酒」が入力できない

◆

　冒頭でも触れましたが、ここまでに紹介したフォームフィルターで選択できる要素の多くは、jQueryのCSSセレクターでも指定できます。最後に、フォームフィルターの一覧とCSSセレクターの対応を一覧にまとめておきます。

Read more: http://ascii.jp/elem/000/000/456/456040/#ixzz20PmmcXoc