●スクリプト

<script type="text/javascript">
$(function(){

var example_postcode = "例）140-0013";
var example_address  = "例）東京都品川区南大井2-12-1-407";
var example_name     = "例）大和賢一郎";
var example_mail     = "例）yamato@1mouke.com";


$("form").submit(function(){

var err = 0;

if($("input[name='postcode']").val()=="" || $("input[name='postcode']").val()==example_postcode){
if($("span#postcode").css("color") != "red"){
$("input[name='postcode']").css("border","1px solid red").after("<span id='postcode'> 郵便番号を入力してください</span>");
$("span#postcode").css("color","red");
}
err = 1;
}else{
$("input[name='postcode']").css("border","1px solid gray");
$("span#postcode").text("");
$("span#postcode").css("color","gray");
}


if($("input[name='address']").val()=="" || $("input[name='address']").val()==example_address){
if($("span#address").css("color") != "red"){
$("input[name='address']").css("border","1px solid red").after("<span id='address'> 住所を入力してください</span>");
$("span#address").css("color","red");
}
err = 1;
}else{
$("input[name='address']").css("border","1px solid gray");
$("span#address").text("");
$("span#address").css("color","gray");
}



if($("input[name='name']").val()=="" || $("input[name='name']").val()==example_name){
if($("span#name").css("color") != "red"){
$("input[name='name']").css("border","1px solid red").after("<span id='name'> お名前を入力してください</span>");
$("span#name").css("color","red");
}
err = 1;
}else{
$("input[name='name']").css("border","1px solid gray");
$("span#name").text("");
$("span#name").css("color","gray");
}


if($("input[name='mail']").val()=="" || $("input[name='mail']").val()==example_mail){
if($("span#mail").css("color") != "red"){
$("input[name='mail']").css("border","1px solid red").after("<span id='mail'> メールアドレスを入力してください</span>");
$("span#mail").css("color","red");
}
err = 1;
}else{
$("input[name='mail']").css("border","1px solid gray");
$("span#mail").text("");
$("span#mail").css("color","gray");
}


if(err==1){
return false;

}

}); // end of submit



$("input#name").val(example_name).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});


$("input#mail").val(example_mail).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});


$("input#postcode").val(example_postcode).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});


$("input#address").val(example_address).css("color","#999")
.one("focus",function(){
$(this).val("").css("color","#000")
});



});
</script>



●HTML
<form action="sendmail.php" method="post">

<p>お届け先の郵便番号 <input id="postcode" type="text" name="postcode" /></p>

<p>お届け先のご住所 <input id="address" type="text" name="address" /></p>

<p>お名前 <input id="name" type="text" name="name" /></p>

<p>メールアドレス <input id="mail" type="text" name="mail" /></p>

<input type="submit" value="送信" />

</form>



●CSS

input#postcode{
width:140px;
}

input#address{
width:360px;
}


input#name{
width:200px;
}


input#mail{
width:200px;
}



●解説
jQueryのfocusを使えば、フォーム内に記入例を表示できる。
フォームがフォーカスされたタイミングで記入例が消える。
なお、未入力チェックの処理において、記入例がそのままだと
未入力ではなく入力済みとして認識されるので
それを防ぐために
|| $("input[name='postcode']").val()==example_postcode
を入れている。

サンプルソース