Un interesante manual publicado en woork que nos ayuda a incluir mensajes en los formularios que se mostrarán automáticamente al usuario cuando haga foco en él. Todo ello gracias a la librería javascript, Scriptaculous.

1. Inclur Scriptaculous.

[COPIAR]
Código JAVASCRIPT (Copiar):
  1. <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
  2. <script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>

2. El código HTML.

Incluimos un input, o varios, y un div con display:none;. Tal y como está abajo:

[COPIAR]
Código HTML (Copiar):
  1. <input type="text" name="name" id="name" onfocus="javascript:showMsg(1)"/>
  2. <input id="msgstatus" type="hidden" value="0" />
  3. <div class="msg" id="msg1" style="display:none;">
  4. ...some html code here...
  5. <a href="#" onClick="javascript:hideMsg(1)"> Close </a>
  7.  
  8. <input type="text" name="email" id="email" onfocus="javascript:showMsg(2)"/>
  9. <input id="msgstatus" type="hidden" value="0" />
  10. <div class="msg" id="msg2" style="display:none;">
  11. ...some html code here...
  12. <a href="#" onClick="javascript:hideMsg(2)"> Close </a>
  13. <div/>

3. Las funciones JavaScript.

Tenemos que incluir las funciones javascript, dos, una para mostrar el mensaje y otra para ocultarlo al hacer clic en Close.

[COPIAR]
Código JAVASCRIPT (Copiar):
  1. <script language="javascript">
  2. function showMsg(idElement){
  3. idEl= idElement;
  4. statusMenu = document.getElementById('msgstatus');
  5. if(statusMenu.value==0){
  6. statusMenu.value=1;
  7. Effect.toggle('msg'+idEl, 'appear'); return false;
  8. }
  9. }
  10.  
  11. function hideMsg(idElement){
  12. idEl= idElement;
  13. statusMenu = document.getElementById('msgstatus');
  14. if(statusMenu.value==1){
  15. statusMenu.value=0;
  16. Effect.toggle('msg'+idEl, 'appear'); return false;
  17. }
  18. }</script>

También esta disponible para descargar en woork.