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

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

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

文● 西畑一馬／to-R

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

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

　次のサンプルでは、リセットボタンが押されたときに「<p>入力内容を初期化しました</p>」という(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" src="button.jpg" alt="リセット" /></dd>
    </dl>
</form>

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


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

■ボタンを選択する: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要素（ファイル選択フォーム）を選択するフィルターです。

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

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


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