Créez un formulaire de style Digg

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 :

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=“text”]
{
    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(‘info.gif');
}
.error
{
    background-image:url(‘error.gif');
}

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(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

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()
{
    $(”.formContainer input[type=text]”).each(function(){
        var text = $(this).attr(“value”);
        if (text == “”)
        {
            $(this).parent().find(”.error”).css(“display”, “block”);
        }
    });
}

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(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.error”).css(“display”, “none”);
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

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.

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.