Franc83

Highlighter un formulaire

30-08-2009

Un script pour mettre le focus sur des éléments de form

Quand vous faites un formulaire de renvoi de mail par exemple, ou pour avoir l'avis de vos visiteurs, ou pour tout autre raison, il n'est pas inutile de mettre le focus ( d'attirer l'attention) de vos visiteurs sur les zones importantes du document à remplir.

Je vous propose par l'intermédiaire de dynamicdrive.com un petit script qui fait clignoter les zones importantes de votre formulaire, c'est a dire le bouton submit et le texte du textarea.

Dans les explications, je ne vous ai pas mis le traitement effectué par le bouton submit, à vous de gérer les évènements liés au bouton et le traitement de la chaîne du textearea.

Voici le formulaire de base :

Voici un formulaire de base pour utiliser le script :

<form style="width:500px;">

<textarea style="padding:10px;" name="texte" class="flashit" rows="5" cols="30">Votre texte içi</textarea>
<input type="submit" value="Cliquez ici pour valider" class="flashit">
</form>

Voici le javascript à insérer APRES votre formulaire :

/*
Flashing form element Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, visit http://www.dynamicdrive.com/
This credit MUST stay intact for use
*/

var flashcolor="red"
var flashinterval=1000 //flash interval in miliseconds (1000=1 sec)

var formcollect=document.getElementsByTagName? document.getElementsByTagName("FORM") : document.all? document.all.tags("FORM") : new Array()
var flashcollect=new Array()

for (i=0; i<formcollect.length; i++){
for (e=0; e<formcollect[i].elements.length; e++){
if (formcollect[i].elements[e].className=="flashit")
flashcollect[flashcollect.length]=formcollect[i].elements[e]
}
}

function flashelements(){
for (f=0; f<flashcollect.length; f++){
if (flashcollect[f].style.color=='')
flashcollect[f].style.color=flashcolor
else
flashcollect[f].style.color=""
}
}

if (flashcollect.length>0)
setInterval("flashelements()",flashinterval)

</script>

Pour le rendre actif, il suffit donc d'ajouter class="flashit" entre les balises de éléments à faire clignoter

Dans le même esprit