This Artical explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field. I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.
Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:
<script src=“scriptaculous/lib/prototype.js” type=“text/javascript”></script>
<script src=“scriptaculous/src/scriptaculous.js” type=“text/javascript”></script>
Step 2: HTML code
Add an input search field with an hidden input field with ID msgstatus to “save” the actual status of auto message (0=hidden; 1=visible):
<input type=“text” name=“name” id=“name“ onfocus=“javascript:showMsg(1)“/>
<input id=“msgstatus” type=“hidden” value=“0” />
<div class=”msg” id=“msg1“ style=“display:none;”>
…some html code here…
<a href=“#” onClick=“javascript:hideMsg(1)“> Close </a>
<div/><input type=“text” name=“email” id=“email“ onfocus=“javascript:showMsg(2)“/>
<input id=“msgstatus” type=“hidden” value=“0” />
<div class=”msg” id=“msg2“ style=“display:none;”>
…some html code here…
<a href=“#” onClick=“javascript:hideMsg(2)“> Close </a>
<div/>
If you want to add other input fields remember to use a progressive numeration for each message ID (id=”msg1″, id=”msg2″, id=”msg3″, id=”msg4″…) and change the value of the parameter in input to hideMsg() and showMsg() functions.
Step 3: JavaScript functions
Now, in order to enable Scriptaculous fade-in and fade-out effects, add this code into the page on your page for the function showMsg() which displays an auto message when an user click on input field:
<script language=“javascript”>
function showMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==0){
statusMenu.value=1;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}…and this code for hideMsg() function to hide the menu when an user click on the link “close”:
function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById(‘msgstatus’);
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle(‘msg’+idEl, ‘appear’); return false;
}
}</script>
CSS DESIGNER OF NEPAL 
It’s actually much easier than that.
document.observe(‘dom:loaded’, function(){
function onFocus(e){
Element.show(e.target.next(‘.msg’));
}
function onBlur(e){
Element.hide(e.target.next(‘.msg’));
}
$$(‘input[type=text]’)
.invoke(‘observe’, ‘focus’, onFocus)
.invoke(‘observe’, ‘blur’, onBlur)
})
how to use the following code:
document.observe(’dom:loaded’, function(){
function onFocus(e){
Element.show(e.target.next(’.msg’));
}
function onBlur(e){
Element.hide(e.target.next(’.msg’));
}
$$(’input[type=text]‘)
.invoke(’observe’, ‘focus’, onFocus)
.invoke(’observe’, ‘blur’, onBlur)
})
Yeah, Kangax it seems good, thanks