Créez un formulaire de style Digg

| Janko Jovanovic | Didier Mouronval |

Traducteur

Bovino

Cet article est la traduction de l'article : Creating a Digg style sign up form. Retrouvez toutes les traductions de Design Shack disponibles sur https://designshack.developpez.com.

Digg.com est l'un des sites sociaux les plus appréciés. Il vous permet de partager des ressources sur le Web. Dans ce tutoriel, nous allons recréer leur formulaire d'inscription avec des fonctionnalités uniques comme les informations sur le champ que vous êtes en train de remplir. La même approche sera utilisée pour afficher les messages d'erreur. Commentez

Avant de commencer, vous pouvez voir une démonstration du résultat final. ♪

- Titre : Créez un formulaire de style Digg

- Auteurs : Janko Jovanovic, Didier Mouronval

- Traducteur : Bovino

- Parution : 16 février 2009

- Mise à jour : 16 avril 2009

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2009 Design Shack. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.

Sommaire

- Comment fonctionne ce formulaire ?

- Commençons

- Ajoutons un peu d'interactivité

- Conclusion

Comment fonctionne ce formulaire ?

Lorsqu'un champ reçoit le focus, une information sur ce champ est affichée en dessous avec une icône bleue. De la même manière, si un champ n'est pas valide, un message d'erreur est affiché au même endroit. Vous pouvez voir ces deux cas sur l'image ci-dessous :

Commençons

Nous n'allons pas recréer tout le formulaire, seulement quelques champs significatifs pour comprendre comment cela fonctionne. Regardez bien l'exemple de code. Chaque champ a un élément label, un input de type texte, un message d'information et un message d'erreur. Vous pouvez voir ci-dessous la structure HTML et les classes CSS associées.

Notez que par défaut, les messages ne sont pas affichés, ce qui est déclaré dans la classe CSS tooltipContainer.

<fieldset class="formContainer">
<h3>Inscrivez-vous ! C'est simple et facile.</h3>
<div class="rowContainer">
<label for="txtFirstname">Nom d'utilisateur</label>
<input id="txtFirstname" type="text" />
<div class="tooltipContainer info">Votre nom doit contenir entre 4 et 15 caract&egrave;res.</div>
<div class="tooltipContainer error">Attention! Votre nom doit contenir entre 4 et 15 caract&egrave;res.</div>
</div>
// D'autres champs ici
</fieldset>

body{
font-family:Arial, Sans-Serif;
font-size:83%;
}
.formContainer
{
background-color: #F5EFC9;
border:none;
padding:30px;
}
.formContainer h3
{
margin:0px;
padding:0px 0px 10px 0px;
font-size:135%;
}
.rowContainer
{
width:100%;
overflow:hidden;
padding-bottom:5px;
height:34px;
}
.rowContainer label
{
width:140px;
float:left;
color: #758656;
font-weight:bold;
}
.rowContainer input[type=&#8220;text&#148;]
{
width:200px;
}
.tooltipContainer
{
height:16px;
font-size:11px;
color: #666666;
display:none;
float:none;
background-repeat:no-repeat;
background-position:left center;
padding:0px 20px;
}
.info
{
background-image:url(&#8216;info.gif');
}
.error
{
background-image:url(&#8216;error.gif');
}

Ajoutons un peu d'interactivité

Jusque là, nous avons une structure HTML fixe et des messages cachés qui n'attendent qu'à être affichés. Nous devons écrire quelques lignes de code pour pouvoir les afficher et les masquer. Bien entendu, nous pourrions le faire en JavaScript pur, mais autant utiliser jQuery. La raison en est simple : moins de code !

Comme je l'ai indiqué au début, un message d'information doit être affiché lorsqu'un champ prend le focus et masqué lorsqu'il le perd. Voici ce que cela donne avec jQuery :

$(document).ready(function(){
$(&#148;.formContainer input[type=text]&#148;).focus(function(){
$(this).parent().find(&#148;.info&#148;).css(&#8220;display&#148;, &#8220;block&#148;);
}).blur(function(){
$(this).parent().find(&#148;.info&#148;).css(&#8220;display&#148;, &#8220;none&#148;);
});
});

Plutôt simple, non ? Maintenant, occupons-nous des messages d'erreur. Nous allons créer une validation factice pour faire fonctionner l'exemple de ce tutoriel. Nous allons encore utiliser jQuery :

function validateForm()
{
$(&#148;.formContainer input[type=text]&#148;).each(function(){
var text = $(this).attr(&#8220;value&#148;);
if (text == &#8220;&#148;)
{
$(this).parent().find(&#148;.error&#148;).css(&#8220;display&#148;, &#8220;block&#148;);
}
});
}

Ce bout de code montre le message d'erreur si le champ est vide. Rappelez-vous qu'il ne s'agit pas d'une vraie validation, cela simule juste ce qui se passe si un champ est erroné. Vous devrez créer vos propres validations, par exemple le bon format des champs ou la validité d'une adresse mail.

Donc, après avoir validé le formulaire, les messages sont affichés. Sur Digg.com, ces messages sont cachés et remplacés par les messages d'information lorsque l'utilisateur les modifie. Il nous manque donc un bout de code pour masquer les messages d'erreur lorsqu'un champ reprend le focus.

$(document).ready(function(){
$(&#148;.formContainer input[type=text]&#148;).focus(function(){
$(this).parent().find(&#148;.error&#148;).css(&#8220;display&#148;, &#8220;none&#148;);
$(this).parent().find(&#148;.info&#148;).css(&#8220;display&#148;, &#8220;block&#148;);
}).blur(function(){
$(this).parent().find(&#148;.info&#148;).css(&#8220;display&#148;, &#8220;none&#148;);
});
});

Voilà, maintenant, nous avons complètement recréé le formulaire de Digg.com. Vous pouvez le voir sur cette page de démonstration ou télécharger l'archive de l'exemple.

Conclusion

Nous avons vu comment recréer le formulaire d'inscription de Digg.com avec juste du code CSS et jQuery. Cependant, j'aimerais vous donner quelques conseils par rapport à ce formulaire :

- évitez de surcharger le formulaire. Il est inutile d'afficher une information comme « Entrez vos nom et prénom » pour un champ « Nom et prénom ». Préférez plutôt mettre un message utile sur les contraintes du champ, par exemple : « Maximum 35 caractères » ;

- utilisez des couleurs différentes pour le texte et les messages. Essayez de cliquer sur « Continuer » sur Digg.com sans remplir les champs. Vous verrez que le formulaire devient très compliqué à lire et il est difficile de voir les séparations entre les champs.