テキストボックスにあらかじめうっすら文字を入れておく

テキストボックスにあらかじめ薄い文字を入れておく

テキストボックスにうっすらテキストが入力されているあれです。

HTML5の場合

placeholder属性でうっすらテキストを指定するだけです。

<form action="#" method="post">
<input name="name" type="text" value="" placeholder="名前を入力してください" />
<input type="submit" value="送信" />
</form>

とてもカンタンなのですが、IEはまだ対応してないですね。。
HTML5 & CSS3 Support

jQueryを使う場合

<!--jQueryとプラグインのjsを読み込み -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-formtips.googlecode.com/files/jquery.formtips.1.2.5.js" type="text/javascript"></script>


<!--うっすらテキストを表示するjsコード -->
<script type="text/javascript">
$(document).ready(function() {
    $('form input.help, form textarea.help').formtips({
        tippedClass: 'tipped'
    });
});
</script>


<!--うっすらテキストの色を指定 -->
<style type="text/css" media="screen">
.tipped {
    color: #BBB;
}
</style>

<form action="#" method="post">
<!--classにhelp、titleにうっすらテキストを指定 -->
<input name="name" type="text" value="" class="help" title="名前を入力してください" />
<input type="submit" value="送信" />
</form>

jQueryを使う場合の注意点

jQueryを使う場合、フォームに入力しないで送信すると、
うっすらテキストがそのまま送信されてしまうようです。

対策として、下記のようなスクリプトで
送信するときに、valueとtitleの値が同じ場合はvalueの値をクリアするようにしました。
ん〜、他によい方法があれば教えてください。

<form action="#" method="post">
<!--classにhelp、titleにうっすらテキストを指定 -->
<input name="name" type="text" value="" class="help" title="名前を入力してください" />
<input type="button" value="送信" onclick="send(this)"/>
</form>

<script>
function send(btn)
{
    if($('input[name="name"]').attr('value') == $('input[name="name"]').attr('title'))
    {
       $('input[name="name"]').attr('value', '') == "";
    }
    btn.form.submit();//送信
}
</script>

参考

HTML5で入力フォームにうっすらテキストを表示する方法
jQueryで入力フォームにうっすらテキストを表示する方法