Formulaire : am�liorer la pr�sentation avec JavaScript. Outils webmaster

FORMULAIRE : AMELIORER LA PRESENTATION

Outils pour webmaster. Trucs et astuces en code HTML, JavaScript, PHP

Descriptif : am�liorer la pr�sentation de son formulaire ne peut qu'en rendre l'utilisation agr�able aupr�s de vos visiteurs. Ces codes en JavaScript vous le permettrons, � vous de choisir ceux que vous voulez inclure dans votre page de formulaire.

Dans les exemples ci-dessous, chaque script est visualisable dans une nouvelle fen�tre. Cliquez sur le num�ro correspondant pour le voir.
Le formulaire ci-dessous n'est qu'une d�monstration, il n'est pas actif et certaines fonctions ne sont actives que dans la page s�par�e d�crivant en d�tail le script.

CHAMP	DESCRIPTIF	N� SCRIPT
Remplissez tous les champs marqu�s *	Oblige � remplir un champ. (Evitez le JavaScript. Travaillez en PHP)	1
NOM *	Le curseur est positionn� dans ce champ � l'ouverture de la page.	2
NOM *	Toutes les lettres basculent en majuscule au changement de champ.	3
Pr�nom *	La premi�re lettre bascule en majuscule au changement de champ.	4
	Le texte s'efface au clic ou par la touche TAB.	5
Oui Non Indiff�rent	Boutons radio.	6
Choix 1 Choix 2 Choix 3	Cases � cocher.	7
El�ment 1 El�ment 2 El�ment 3 Tous - Aucun	Cases � cocher avec s�lection.	8
Case 1 Case 2 Case 3 Case 4	On ne peut cocher qu'un certain nombre de cases (dans cet exemple : 2).	9
E-mail * *	Contr�le de la pr�sence de @, de l'existence de caract�res conforme, de la validit� de l'extension du nom de domaine etc. (Voir le contr�le de mail en PHP beaucoup plus performant).	10
Un num�ro *	Contr�le si le champ est rempli uniquement avec des chiffres.	11
	Le texte du bouton change au clic.	12
	Une fois le bouton (S'abonner) enfonc�, on ne peut plus cliquer dessus.	13
Rien	Le champ ne s'efface pas. Ajouter disabled="disabled" dans l'input du champ, de la case � cocher, du bouton radio ou du textarea	-
	Couleur dans les champs.	14
Votre num�ro de t�l�phone	Le curseur se positionne sur le champ suivant lorsqu'une longueur de champ pr�-d�finie est atteinte.	15
Date (cliquez sur le calendrier) *	Un clic sur l'ic�ne ouvre un calendrier � la date. Un clic sur une date l'inscrit dans le champ.	16
Votre commentaire (limit� � 10 caract�res) Nombre de caract�res en cours :	Limitation et affichage du nombre de caract�res dans un textarea.	17
	Un point d'interrogation s'affiche au curseur lors de son passage sur le bouton "Effacer".	18
	Un bouton "Quitter" pour aller � une autre lien.	19
	Couleur sur les boutons.	20
	Couleur sur les ascenseurs du textarea.	21
	Changement de couleur du bouton (ex : "Quitter") lorsqu'on fait un roll-over ou un clic.	22
	Un bouton "Retour" ou un lien pour revenir au formulaire en cas d'erreur sans effacer les donn�es.	23

Remarque :
- Il peut y avoir des difficult�s � vouloir mettre en oeuvre tous ces scripts dans un m�me formulaire. En effet, certains scripts n�cessitent d'inclure dans <form> un appel par OnSubmit et return. Or, l'appel de return arr�te toute autre op�ration. Ce qui fait que d'autres return ne seraient pas pris en compte. On ne pourra donc �crire :
<form OnSubmit="return fonction1; return fonction2">
On peut, toutefois, appeler plusieurs fonctions du moment qu'il n'y ait qu'un seul return :
<form OnSubmit="fonction1();return fonction2();">

- La plupart de ces fonctions JavaScript sont disponibles en PHP.

Nota : suivant le type ou la configuration plus ou moins restrictive de votre navigateur, de votre firewall ou des outils anti-popup, les scripts JavaScript peuvent ne pas fonctionner correctement.

Construisez votre formulaire en PHP

Retour