メールフォームにフォーカスすると吹き出しっぽいものがでるプログラム

balloon

EFO(Entry Form Optimization) すなわちメールフォーム最適化。

MFOだったかEMOだったか覚えられないことがたびたびあります・・。

説明はLIG先生にゆずり・・・

入力してくれる時に吹き出しがでると楽しいですよね!!(?) 真面目なフォームだけじゃつまらない!

ということで吹き出しがでるうざいメールフォームを制作してみました。

吹き出しっぽいものがでるメールフォーム サンプル

Jquery
$(document).ready(function(){
    $(".formcheck div").hide();
  });

$(function() {
	$("#a").focus(function(){
	if($("#a").val() == ""){
         $("#fa").fadeIn("slow");
				}
    })
    .blur(function(){
         $("#fa").hide();
    })
  });
~~以下くりかえし~~
CSS
.formcheck input{
	display:block;
	margin-bottom:10px;
}

.formcheck label{
	padding: 5px;
	border-radius:5px;
	background-color: #F99;
	font-size: 11px;
	margin:0px;
}

.formcheck div{position: absolute;}
HTML
<div><form class="formcheck"><input id="a" type="text" value="" /> 
<div id="fa"><label>入力してね</label></div> 
</form></div>