Web制作の現場で使えるjQuery UIデザイン入門 ― 第8回
jQueryによるフォームのデザインの基礎（前編）
2009年09月02日 15時30分更新
※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第8回です。過去の記事もご覧ください。
前回まではjQueryの基本的な使い方である、「セレクターで(X)HTML要素を指定し、イベントが発生したタイミングで(X)HTMLやCSSを書き換える」プログラムの書き方を紹介してきました。jQueryにはほかにも、Webページを使いやすくする便利な機能が用意されています。今回からは、これまでに触れていない特別な機能を紹介していきましょう。
第8回は、「問い合わせフォーム」など、商用サイトには欠かせない(X)HTMLフォームをjQueryで制御する方法です。jQueryには、1．フォーム部品の値を取得・変更する命令、2．フォームに関するイベントの処理、2．フォーム部品を選択するセレクター――といったフォーム関連の機能が揃っています。
1.フォーム部品の値を取得・変更する命令
フォームを操作する専用の命令が、val() です。val() を使えば、フォームに入力／選択されている値を取得したり、変更できます。
■value属性の値を取得する
フォームに入力されているテキストや選択されている値を取得するには、 val() を、括弧内には何も記述せずに使用します。値を取得したい対象はセレクターで指定します。たとえばセレクターでinput要素を指定すると、val() はフォーム部品の種類を決める type属性に関係なく、すべてのinput要素のvalue属性の値を取得します。
次のサンプルは、確認ボタン（button要素）がクリックされるとinput要素の値を取得し、「 (input要素に入力された内容)にメールを送信します。」という確認のメッセージをp要素内に書き出します。同時に、button要素を「確認」から「送信」に変更します。
▼サンプル01（スクリプト部分）
$(function(){
$("button").click(function(){
$("p").text($("input").val()+"にメールを送信します。");
$("button").text("送信");
})
})
▼サンプル01（(X)HTML部分）
<p>メールアドレス：<input type="text" name="name" /></p>
<button>確認</button>
▼サンプル01（実行結果）
<p> (input要素に入力された内容)にメールを送信します。</p>
<button>送信</button>
 |  | |
|---|---|---|
| サンプル01の実行画面。確認ボタンを押すと、入力されたメールアドレスに送信する旨の確認メッセージが表示される | ||
val() の便利な点は、input要素以外のフォーム部品でも同じように入力または選択されている値を取得できることです。たとえばセレクターでselect要素を指定すると、選択されているoption要素のvalue属性を取得できます。
$("select").val();
value属性がないtextarea要素の場合も、入力されているテキストを取得できます。
$("textarea").val();
■value属性の値を変更する
フォームに入力されているテキストや選択されている値を変更するときにも、val() を使います。対象とする要素はセレクターで指定し、変更したい値を括弧内に記述します。
次のサンプルでは、クリアボタン（button要素）が押されたらval("")を実行し、input要素の値を空に変更（削除）します。
▼サンプル02（スクリプト部分）
$(function(){
$("button").click(function(){
$("input").val("")
})
})
▼サンプル02（(X)HTML部分）
お名前：<input type="text" /><button>クリア</button>
▼サンプル02（実行結果）
 |
|---|
| サンプル02の実行画面。クリアボタンをクリックするとフォームに入力された内容が削除される |
「まとめて読みたい！」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。
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]")
