完成サンプルです

試しにクリックしたり、文字を入れてみてください。入力しようとすると、ちゃんと文字が消えて空っぽになります。
また、元々の文字は薄いグレーなのに、入力するときには濃い色の文字になってます。

何をどうしているのか

まずはテキストボックスの初期値です。初めからテキストボックスに文字を入れておくには　value　を使います。

[html]

<ul>
<li><input type="text" value="ユーザー名" /></li>
<li><input type="text" value="メールアドレス" /></li>
</ul>

[/html]

そしてこのままだと、他の文字と同じように 濃い色の文字色のままです。とりあえずCSSでうすくしておきます。

[css]

input[type="text"] {
color: #ccc;
}

[/css]

これで ぱっと見はよくあるフォームの見た目のようになりました。ただ、この状態だと当然ですが カーソルを当てても元の文字が消えません。
カーソルを当てて入力できる状態（フォーカス）にしたときは 先ほどのvalueで設定した初期値を まっさらに消してしまわないといけないのです。

コードです

[javascript]

jQuery(document).ready(function(){

// textBox は テキストボックス全てを指定。
var textBox = jQuery("input:text");

// 条件は テキストボックスにフォーカスされたら。
textBox.focus(function(){
// class名 "textFocus" を追加。（文字色を濃くする）
jQuery(this).addClass("textFocus");

// if条件は HTMLで設定した初期値（value）のままかどうか
if(this.value == this.defaultValue){
// trueなら テキストボックスを 空 にする
jQuery(this).val(”);
}
// 逆に テキストボックスからフォーカスが失われたとき。
}).blur(function(){

// if条件は テキストボックスの数値が 空（０文字）のとき
if(jQuery(this).val() == ”){
// テキストボックスの中身を 元の初期値（value）にする
// classも外す（文字色を元の薄い色に戻す）
jQuery(this).val(this.defaultValue).removeClass("textFocus");
}
});

});

[/javascript]

詳細はコードに書いてますので見てくださいｗ
カンタンに説明すると、テキストボックスにフォーカスしたときは

フォーカスする
↓
初期値（value）かどうか判定する
↓
初期値なら文字消去。別の文字がすでに入力されてたら消さない
↓
文字を濃くする（classを追加）

です。逆に フォーカスを失った（他のどっかしらをクリックしたりして テキストボックスからカーソルが外れた）場合はこうです。

フォーカスを失う
↓
空（０文字） かどうか判定する
↓
空（０文字）なら テキストボックスの値を初期値に戻す
別の文字がすでに入力されてたら戻さないでそのまま
↓
文字をうすくする（classを外す）

としてるだけです。
これでこのjQueryを使用しているページのテキストボックスで、初期値を指定しているものは 全て適用されますので楽ちんです(*´꒳`*)

また、特定のテキストボックスだけに指定したい場合、idなんかで指定してやると吉かもしれません。今回でいうと、指定したいテキストボックスに直にidを振ってあげて、変数 textBox にそのidをまんま代入したらOKです。

じつはHTML5だと…

こんなことコチョコチョしなくても、バシッとあるんです。jQuery(ﾟ⊿ﾟ)ｲﾗﾈ

これですよ。さっきのと動作はほぼ変わらず。

[html]

<input type="text" placeholder="パスワード" />

[/html]

うわー。ねぇ。楽勝です。

でも、HTML5だと IE8以下のブラウザで使えないので。jQueryでやったほうが やってやった感もあるし。えぇ。

まあ、現状はまだまだHTML5だけでいくのもアレなので、使い分けなんかでいいのではないのでしょうか。