フォームってWebページに動的な仕掛けを作る 一番初歩的なものだと思います。最初にフォームからいろいろと動かせるようになると、その後にいろいろと応用も効いてくると思います。経験上。

フォームから値を取得したり、取得した値を表示したり、選択項目に合わせて 見た目をガラっと変えてみたりするのは jQueryなどのプログラミング初心者だと 結果がすぐに目に見えるので非常に楽しいです。

そこで まずはフォームのなかでも扱いやすい、テキストボックスの値を取得して表示させてみたいと思います。
ただ、そのままテキストの値を取得しても面白くないので、打ち込んだ文字を打ち込んだそばからリアルタイムで取得して表示させてみたいと思います。

2013/07/10追記
プラグイン作りました！

この記事の内容を、サクッと反映させられるプラグインです。
ﾃｷｽﾄﾎﾞｯｸｽに打ち込んだ文字をﾘｱﾙﾀｲﾑで取得できるjQueryﾌﾟﾗｸﾞｲﾝできました | LogicA　- jQuery中心のWeb考察生活 –

オプションで少し機能を付け加えてます。詳しい使い方なども上記でいろいろ書いてます。
よければダウンロードして使ってみて下さい！

サンプル

HTML

[html]

<div id="realWrite"><p></p></div>

<div id="realText"><input type="text"></div>

[/html]

jQuery

[javascript]

jQuery("#realText input:text").on(‘click blur keydown keyup keypress change’,function(){
var textWrite = jQuery("#realText input:text").val();
jQuery("#realWrite p").html(textWrite);
});

[/javascript]

HTMLはシンプルに、入力するためのテキストボックスと、文字を表示するためのボックスを div で作り、そのなかに p要素 を入れています。

jQueryで発生条件を指定

今回のコンセプトは、リアルタイムでテキストボックスに “何か” アクションを起こした場合に 文字を都度取得することです。
今回は少しおおげさに、トリガーになるイベントを片っぱしから入れてみました。
こんなです。

いくつか重複してますが、関連しそうなものを書きだしてみました。
click や keydown、keyup は今回の用途では外しても問題ないでしょう。

jQueryのイベントをいっぺんに指定

ふつうは 「 jQuery(“#hoge”).click(function(){ 〜〜}); 」 と、ひとつひとつイベントを指定していきますが、上記のトリガーイベントをまとめていっぺんに指定してしまいます。

on()を使用します。
$(要素).on(‘トリガー1 トリガー2 トリガー3 … , function(){
　　　〜実行したいイベントを記述〜
});
トリガーの間は 半角スペースで区切ります。区切ればいくつでも指定ができます。今回のように いろいろな操作をしても同じイベントを発生させる場合に有効です。

テキストボックスの値を取得する

テキストボックスに入力した値を取得するのは、ケツに .val() を付けます。
[javascript]

textWrite = jQuery("#realText input:text").val();

[/javascript]

今回は 新しい変数 textWrite を作って、そのなかにテキストボックスに入力した値をリアルタイムで代入しています。なので、テキストボックスに文字を入力するたびに 変数textWrite にテキストボックスの全文字を都度入れている、という処理になります。

テキストボックスに入力した文字を出力する

あとはHTMLとして 文字を書き出すだけです。

今回は表示窓(id=realWrite)のなかに p要素をもともといれてあります。これはjQueryであとから付け足しても大丈夫です。今回ははじめから用意してます。

p要素は初期値は空っぽですが、そこに先ほど取得した数値を入れます。

[javascript]

jQuery("#realWrite p").html(textWrite);

[/javascript]

id=realWrite の中の p要素 に .html() を使用し、先ほど取得した変数 textWrite を入れます。

まとめます

文字を入力する(キーボードを叩く、クリックなど含む)
↓
変数 textWriteに文字を格納する
↓
p要素に吐き出す

となります！ いつもと少し違ったフォームだと、ちょっぴり効いた隠し味のようで粋ではないですか？

以上、小技好きな いわだて @dutchisover でした。