Pendant mes cours de xHTML, CSS, Javascript cette semaine j'ai expliqué l'utilisation de la balise html fieldset.
J'utilise un plugin jQuery qui permet grâce à l'utilisation des balises fieldset d'avoir un formulaire qu'on remplis pas à pas.
Prenons un exemple de code tel que :
<!-- N'oubliez pas d'ajouter ici le doctype et les balises html, head etc... -->
<body>
<div id="page">
<form action="submit.php" method="post">
<fieldset>
<legend>Informations Personnelles :</legend>
<label for="nom">Nom :</label>
<input id="nom" name="nom" type="text" />
<label for="prenom">Prénom :</label>
<input id="prenom" name="prenom" type="text" />
<label for="sexe">Sexe :</label>
<input id="sexem" name="sexe" type="radio" value="m" />M
<input id="sexef" name="sexe" type="radio" value="f" />F
</fieldset>
<fieldset>
<legend>Domicile :</legend><label for="adresse">Adresse :</label>
<textarea id="adresse" cols="50" rows="3" name="adresse"></textarea>
<label for="cp">Code Postal :</label>
<input id="cp" name="cp" type="text" />
<label for="ville">Ville :</label>
<input id="ville" name="ville" type="text" />
</fieldset>
<fieldset>
<legend>Compte :</legend>
<label for="identifiant">Identifiant :</label>
<input id="identifiant" name="identifiant" type="text" />
<label for="mdp">Mot de passe :</label>
<input id="mdp" name="mdp" type="password" />
<label for="confirm">Confirmation :</label>
<input id="confirm" name="confirm" type="password" />
</fieldset>
<p>
<input id="submit" name="submit" type="submit" value="Envoyer" />
</p>
</form>
</div>
</body>
</html>
Les trois parties du formulaire : Informations Personnelles, Domicile et Compte seront découpé en 3 étapes sur 3 pages avec une navigation "etape précédente" et "étape suivante".
L'utilisateur peut donc voir qu'il y a 3 étapes pour valider le formulaire, je trouve que le formulaire est plus clair quand il est fait étape par étape.
Voir la démo. Télécharger le plugin.
Pour en savoir plus rendez vous sur la page FormToWizard plugin
Laisser un commentaire