Améliorer la convivialité de vos formulaires à l'aide de messages automatiques et Scriptaculous

Afin d'améliorer la convivialité de vos formulaires et leur ajouter une touche de web 2.0, nous allons y ajouter des bulles de message automatique lors du focus de la souris dans un élément d'un formulaire. Pour en savoir plus, jetez un oeil à ce qui suit :

Étape 1: Inclure la librairie Scriptaculous

Dans votre page, entre les balises <head>, insérer le code suivant :
<script src="http://www.pckult.net/prototype.js" type="text/javascript"></script>
<script src="http://www.pckult.net/scriptaculous.js" type="text/javascript"></script>

Étape 2: HTML

Ajouter un formulaire dans votre page. Pour les besoins de notre exemple, nous allons lui ajouter un champ texte ainsi qu'un second caché afin de retenir l'état de la boîte de message.
Code :
** Attention au ID

<input type="text" name="name" id="name" onfocus="javascript:VoirMessage(1)"/>

<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
[...] Le texte de votre message [...]
<a href="http://www.pckult.net/#" onClick="javascript:CacherMessage(1)"> Fermer </a>
<div/>
Si vous avez plus d'un champ dans votre formulaire, il suffit de continuer la numérotation de vos messages en modifiant l'ID de celui-ci (id="msg1", id="msg2", id="msg3", id="msg4" ...). Ensuite il suffit de modifier le paramètre de la fonction VoirMessage(id) et CacherMessage(id) par le numéro du message à afficher.

Étape 3: JavaScript

Afin d'activer l'effet Scriptaculous, ajouter ce code dans votre page.
<script language="javascript">
   // Affiche le message lors du focus sur l'élément selon l'id passé en paramètre
   function VoirMessage(idElement){
      idEl= idElement;
      statusMenu = document.getElementById('msgstatus');
      if(statusMenu.value==0){
         statusMenu.value=1;
         Effect.toggle('msg'+idEl, 'appear'); return false;
      }
   }
   // Cache le message selon l'id passé en paramètre
   function CacherMessage(idElement){
      idEl= idElement;
      statusMenu = document.getElementById('msgstatus');
      if(statusMenu.value==1){
         statusMenu.value=0;
         Effect.toggle('msg'+idEl, 'appear'); return false;
      }
   }
</script>
Voilà, rien de plus simple et l'effet est magnifique. Donc si vous désirez afficher certains messages dans vos formulaires, essayer ce truc, il est formidable et c'est à la mode!