Fil d'ariane : Accueil du labo
/ Javascript
/ jQuery
/ Formulaire qui va bien

jQuery : aide à la saisie d'information dans un formulaire

Introduction

Dans ce tutoriel, nous allons mettre en place un effet visuel qui permettra d'afficher une aide à la saisie, sous forme d'un texte explicatif, lorsque le focus sera sur le champ concerné. C'est en quelque sorte une alternative aux infobulles ou aux FAQs contextuelles.

L'objectif est de proposer une interface plus dynamique tout en conservant les informations visibles pour les internautes ne pouvant disposer des effets Javascript. Dans un premier temps nous allons créer le formulaire brut qui affichera toutes les informations puis nous le déclinerons en ajoutant des effets grâce à la biliothèques de fonctions jQuery.

Requis

La librairie jQuery.

Formulaire brut

Nous allons construire une partie d'un formulaire qui servira à renseigner concernant la civilité d'une personne. Chaque champ sera contenu dans un div et un label lui sera associé :

<div class="pfield">
	<label for="firstname">Prénom</label>
	<input type="text" name="firstname" value="" class="field" />
</div>

Nous placerons les informations relatives au champ de saisie dans un div situé juste en dessous :

<div class="info">
	<p>Ceci est un texte d'aide pour expliquer pourquoi il est utile de remplir le champ prénom ci-dessus</p>
</div>

Au final, voici le code du formulaire que l'on identifiera par formulaire_brut :

<form id="formulaire_brut" action="index.php" method="get">
	<fieldset>
		<legend>Identité</legend>
		<div class="pfield">
			<label for="firstname">Prénom</label>
			<input type="text" name="firstname" value="" class="field" tabindex="100" />
		</div>
		<div class="info">
			<p>Ceci est un texte d'aide pour expliquer pourquoi il est utile de remplir le champ prénom ci-dessus</p>
		</div>				
		<div class="pfield">
			<label for="lastname">Nom</label>
			<input type="text" name="lastname" value="" class="field" tabindex="101" />
		</div>
		<div class="info">
			<p>Ceci est un texte d'aide pour expliquer pourquoi il est utile de remplir le champ nom ci-dessus</p>
		</div>
		<div>
			<input type="submit" name="bt_submit" value="Envoyer" />
		</div>		
	</fieldset>			
</form>

Vous aurez certainement noté la présence des noms de classes dans l'attribut class des div et des inputs.

info permet de mettre en forme et de distinguer les conteneurs des messages d'informations
field permet de mettre en forme et de distinguer les champs de formulaires

Nous obtenons ceci :

Formulaire dynamique

Le formulaire dynamique sera exactement le même que le formulaire brut. C'est là que l'on voit qu'il est important et avantageux de bien dissocier le contenu (HTML), la forme (CSS) et le comportement (Javascript). Nous allons en effet simplement définir les comportements des objets!

Tout d'abord, il nous faut renommer le formulaire.

<form id="formulaire_dynamique" action="index.php" method="get">

Remarque : les deux formulaires existant dans la même page, il ne peuvent donc pas être identifié avec le même nom.

Nous allons à présent cacher les zones d'informations au chargement de la page :

$(document).ready(function() { // Instruction permettant de déclarer les actions à réaliser au chargement de la page
	// Séléction des zones d'informations
	$("#formulaire_dynamique .info").each( // Sélection des divs infos et itération
	function(){
		$(this).hide(); // On cache l'élément
	});
});

L'une des fonctionnalités les plus intéressantes avec jQuery est l'utilisation des sélecteurs. Il est ainsi possible de cibler un ou plusieurs évènements correspondant à des critères. Ici, le modèle appliqué est celui des CSS (dans un autre tutoriel nous verrons le ciblage via XPATH).

"#formulaire_dynamique .info" permet donc de cibler les éléments dont le parent est l'élément identifé par l'id formulaire_dynamique et ayant la attribut de classe info. Nous obtenons un tableau d'éléments et pour chaque itération nous appliquons une transformation (hide()) qui permet de cacher la zone.

Nous allons à présent mettre en place le comportement qui consiste à afficher une zone d'information lorsque le champ concerné a le focus. Lorsque le focus est perdu, on cache à nouveau la zone d'information.

$(document).ready(function() { // Instruction permettant de déclarer les actions à réaliser au chargement de la page
	// Séléction des zones d'informations
	$("#formulaire_dynamique .info").each( // Sélection des divs infos et itération
	function(){
		$(this).hide(); // On cache l'élément
	});
	
	// Sélection des champs de formulaires
	$("#formulaire_dynamique .field").each(function(){ // Sélection des input et itération
		// Définition de l'évènement onfocus
		$(this).focus(function(){
			$(this).parent().next().slideDown('slow'); // On remonte dans l'arbre DOM et on accède à l'élément suivant
		});
		// Définition de l'évènement onblur
		$(this).blur(function(){
			$(this).parent().next().slideUp('slow'); // On remonte dans l'arbre DOM et on accède à l'élément suivant
		});		
	 });	
});

Comme précédemment, nous ciblons les champs de formulaires afin de rédéfinir les actions à effectuer lorqu'ils ont le focus et lorsqu'il le perde.

"parent()" permet d'accéder au parent de l'élément input, c'est à dire le conteneur. "next()" permet d'accéder à l'élément suivant le parent et qui correspond au conteneur de la zone d'information. Lorsque le champ hérite du focus on affichera la zone avec l'instruction "slideDown()". Et vous l'aurez compris, lorsque le focus sera perdu il suffira de cacher la zone avec "slideUp()".

Voici le résultat :

C'est une fonctionnalité très facile à mettre en oeuvre. jQuery permet de faciliter la navigation dans l'arbre DOM et de réaliser des effets qui apportent un peu de dynamisque à votre interface.

jQuery : aide à la saisie d'information dans un formulaire

Introduction

Requis

Formulaire brut

Formulaire dynamique

Rechercher un billet

Sous Rubriques

Photo Pif