Formulaire d'identification Web avec les styles Css
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Formulaire Css d'identification
Par un jeu de construction avec les styles Css et les attributs Html, nous allons découvrir comment produire des formulaires Web ergonomiques et très professionnels.
Dans l'exemple finalisé illustré par la capture, au clic sur le bouton Login, un formulaire d'identification surgit avec un effet de zoom animé. Dans le même temps et pour bien le mettre en évidence, tout l'arrière-plan est atténué avec un voile d'opacité. Si l'utilisateur clique sur le bouton Identification sans renseigner l'intégralité des informations, le formulaire se bloque automatiquement et surligne les champs obligatoires. D'ailleurs en passant la souris sur l'une ou l'autre zone, une infobulle apparaît. Elle indique de compléter le champ en question.
Lorsque l'utilisateur tape les premiers caractères, l'indication de guide à la saisie disparaît automatiquement. A ce titre, vous pouvez remarquer que l'inscription du mot de passe est encodée. Et lorsqu'il clique sur le bouton identification après avoir renseigné les deux éléments, les données sont soumises et passées dans l'Url de la page Web. Et nous le verrons, tous ces comportements sont gérés par les styles Css et des attributs Html, sans l'intervention du code Javascript.
Sources de travail
Pour les démonstrations, nous proposons d'appuyer l'étude sur une page Web à la construction quelque peu amorcée.
- Télécharger le fichier compressé formulaire-css-identification.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur ce fichier index.htm pour l'ouvrir dans le navigateur par défaut,
- Cliquer sur ce bouton pour afficher le formulaire d'identification,
Il s'affiche certes mais il apparaît fort dépourvu et quelque peu disgracieux. De nombreux défauts sont à remarquer. Tout d'abord, il s'aligne sur le bord gauche de la page Web et surgit brusquement sans voile d'opacité sur l'arrière-plan. Les zones de saisie ne sont pas mises en valeur. Elles apparaissent noyées dans la masse. Le bouton d'identification n'occupe pas la largeur de l'espace disponible. De fait, il accueille la case à cocher à ses côtés. Les indications de guide à la saisie brillent par leur absence. Si vous tapez un mot de passe, celui-ci n'est pas encodé.
En revanche, si vous cliquez sur l'icône de la croix ou sur le bouton Annuler, le formulaire disparaît correctement pour rendre le champ libre à la page Web.
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
...
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
</head>
<body>
...
Et comme le stipule son chemin relatif, elle est effectivement placée dans le sous dossier local Css.
La construction qui nous concerne est relativement complexe. Elle est placée dans le calque (Balise Div) associé au style conteneur.
...
<div class="conteneur">
<button onclick="document.getElementById('bdg').style.display = 'block'" class="bouton bleu tailleL">Login</button>
<div id="bdg" class="boite">
<div class="boite-contenu">
<div class="centrer"><br>
<span onclick="document.getElementById('bdg').style.display = 'none'" class="bouton tailleL transparent positionHautDroit" title="Close Modal">×</span>
<img src="img/img_avatar.png" alt="Avatar" style="width:30%" class="cercle margeHaut">
</div>
<form class="conteneur" action="index.htm">
<div class="section">
<label><b>Nom d'utilisateur</b></label>
<input class="zoneSaisie margeBas" type="text" name="nomUtil">
<label><b>Mot de passe</b></label>
<input class="zoneSaisie" name="mdp">
<button class="bouton bloc bleu section decalage" type="submit">Identification</button>
<input class="caseCocher margeHaut" type="checkbox" checked="checked"> Se souvenir de moi
</div>
</form>
<div class="conteneur bordureHaut decalage16 grisClair">
<button onclick="document.getElementById('bdg').style.display = 'none'" type="button" class="bouton rouge">Annuler</button>
<span class="droite decalage"><a href="#">Mot de passe oublié ?</a></span>
</div>
</div>
</div>
</div>
...
Tout d'abord, vous notez la présence d'un bouton associé aux styles bouton, bleu et tailleL. Par le biais d'un code Javascript, il commande l'affichage de la boîte de dialogue reconnue par son nom bdg en réglant l'attribut display sur la valeur block.
Cette boîte de dialogue est située juste en dessous dans le code Html. Elle est associée au style boîte.
- A la racine du dossier de décompression, double cliquer sur le sous dossier Css pour l'ouvrir,
- Dès lors, cliquer droit sur le fichier mes-styles.css,
- Puis, dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
.boite
{
z-index:3;
display:none;
padding-top:100px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
}
Ce calque occupe 100% de la largeur et 100% de la hauteur (width:100%; height:100%;). Le style display réglé à none masque l'intégralité de la boîte de dialogue tant que le clic sur le bouton Javascript n'a pas inversé la valeur de cet attribut.
Voile d'opacité
Dans ce jeu de construction au fil de la découverte de la structure Html, nous souhaitons d'abord profiter de ce premier style découvert, pour appliquer un voile d'opacité sur l'arrière-plan à l'affichage de la boîte de dialogue.
- A la fin du style boite, ajouter l'instruction Css suivante :
La fonction Css Rgba agit sur le calque mais pas sur ses dépendances, les calques imbriqués. Donc l'arrière-plan doit être tamisé à l'apparition mais pas la boîte de dialogue. Cette fonction applique en effet une couleur de fond noire (0,0,0) avec une opacité de 40% (0,4). L'arrière-plan étant défini à 100% en width comme en height, c'est toute la page qui est concernée.
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Actualiser le cache du navigateur (CTRL + F5) et cliquer sur le bouton Login,
Un voile d'opacité recouvre effectivement l'arrière-plan.
Mais à ce stade fort naturellement, la boîte de dialogue est encore fort mal structurée.
Centrer la boîte de dialogue
Dans ce jeu de construction par retouches au fil de la découverte, nous souhaitons désormais replacer la boîte de dialogue au centre de la page Web.
- Revenir dans l'éditeur Notepad, sur le code de la page index.htm cette fois,
- Basculer l'affichage dans le code de la feuille de styles,
{
background-color:#fff;
position:relative;
padding:0;
outline:0;
width:600px;
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
border-radius:6px;
animation:animerzoom 0.6s;
}
La largeur effective de cette boite de dialogue est de 600px (width:600px). Une ombre portée doublée lui est appliquée : box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19). Les arguments sont les suivants : Décalage X, Décalage Y, Rayon pour l'aspect flouté, rayon de propagation et couleur. Dans la fonction Rgba, les trois premiers paramètres sont les composantes de couleur. Le dernier paramètre est le degré de transparence de cette couleur. Donc ici, il s'agit de 20% d'opacité pour la première et de 19% pour la seconde. Cette boîte de dialogue a les bords arrondis : border-radius:6px. De plus, elle appelle une animation : animation:animerzoom 0.6s.
- Au début du style boite-contenu, ajouter l'instruction Css suivante : margin:auto;
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Actualiser le cache du navigateur (CTRL + F5) puis cliquer sur le bouton Login,
Animation du zoom
Maintenant, nous souhaitons jouer l'animation de l'apparition de cette boîte de dialogue avec un effet de Zoom. Souvenez-vous, elle doit se produire sur une durée de 0,6 seconde.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles,
- Juste en-dessous du style boite-contenu, créer le keyframes suivant :
{
from
{
transform:scale(0);
}
to
{
transform:scale(1);
}
}
C'est en effet un keyframes (Règle de l'animation) qui peut donner vie à cet effet de zoom (Scale = Echelle) sur 0,6 seconde. Nous partons (from) d'une échelle à 0%, soit inexistante, pour arriver à l'issue du délai à une taille pleine grâce à une échelle ramenée à 100% (transform:scale(1)).
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Actualiser le cache du navigateur (CTRL + F5) puis cliquer sur le bouton Login,
Comme vous pouvez le voir, la boîte de dialogue apparaît centrée avec l'arrière-plan tamisé et un effet de zoom progressif.
- Basculer sur le code de la page index.htm,
...
<div class="boite-contenu">
<div class="centrer"><br>
<span onclick="document.getElementById('bdg').style.display = 'none'" class="bouton tailleL transparent positionHautDroit" title="Close Modal">×</span>
<img src="img/img_avatar.png" alt="Avatar" style="width:30%" class="cercle margeHaut">
</div>
...
Après l'image de l'avatar, le formulaire de soumission intervient.
<form class="conteneur" action="index.htm">
<div class="section">
<label><b>Nom d'utilisateur</b></label>
<input class="zoneSaisie margeBas" type="text" name="nomUtil">
<label><b>Mot de passe</b></label>
<input class="zoneSaisie" name="mdp">
<button class="bouton bloc bleu section decalage" type="submit">Identification</button>
<input class="caseCocher margeHaut" type="checkbox" checked="checked"> Se souvenir de moi
</div>
</form>
Il appelle (action) la page en cours (index.htm). Mais il est censé lui transmettre les valeurs saisies par l'utilisateur dans les zones de saisie. Un Post serait préférable à un Get pour masquer le mot de passe. Ce sont des notions que nous avons largement enseignées au cours des formations à la programmation Php. Mais ici, seule la réalisation du formulaire d'identification par les styles nous intéresse.
Mise en valeur des zones de saisie
Les zones de texte sont associées au style zoneSaisie comme le rappelle l'extrait de code. Et nous souhaitons les mettre en valeur.
- Basculer sur le code de la feuille de styles,
- A la suite du style zoneSaisie, ajouter les instructions Css suivantes :
border:1px solid #ccc;
border-radius:6px;
Nous réglons l'attribut width à 100% pour que ces zones de texte couvrent la largeur de l'espace disponible dans le formulaire d'identification. Une légère bordure d'encadrement est ensuite appliquée grâce à l'attribut border, pour les identifier précisément. Enfin l'attribut border-radius arrondit les angles de ces zones pour les rendre plus élégantes.
- Enregistrer les modifications et basculer sur la page Web,
- Actualiser le cache du navigateur,
- Puis, cliquer sur le bouton Login,
Guides à la saisie
Désormais et pour poursuivre ce jeu de construction, nous devons placer des indications de saisie à l'intérieur de ces zones de texte. L'internaute saura sans ambiguïté quelles sont les informations attendues. Et comme nous l'avons évoqué en préambule de cette formation, ces guides doivent s'évaporer dès lors que la première lettre est frappée. Cette fois, ce n'est pas un style Css qui réalise cette prouesse. Nous devons exploiter l'attribut html placeholder à configurer directement dans la balise du contrôle concerné.
- Revenir dans l'éditeur Notepad sur le code de la page Html,
- Dans les balises Input des deux zones de saisie, ajouter les attributs placeholder comme suit :
<form class="conteneur" action="index.htm">
<div class="section">
<label><b>Nom d'utilisateur</b></label>
<input class="zoneSaisie margeBas" type="text" placeholder="Tapez votre nom d'utilisateur" name="nomUtil">
<label><b>Mot de passe</b></label>
<input class="zoneSaisie" placeholder="Tapez votre mot de passe" name="mdp">
<button class="bouton bloc bleu section decalage" type="submit">Identification</button>
<input class="caseCocher margeHaut" type="checkbox" checked="checked"> Se souvenir de moi
</div>
</form>
...
- Enregistrer les modifications et basculer sur la page Web,
- Actualiser le navigateur (F5) puis cliquer sur le bouton Login,
- Dès lors, commencer la frappe dans l'une ou l'autre zone de texte,
Comme vous le constatez, à peine le premier caractère est-il tapé que le guide à la saisie du placeholder disparaît.
Le comportement de cet attribut Html est très intéressant dans la mesure où si vous videz cette zone, l'indication de guide réapparaît aussitôt.
Validation du formulaire
Néanmoins, malgré ces indéniables avancées, des anomalies subsistent. Si vous cliquez sur le bouton Identification sans avoir renseigné l'intégralité des informations requises, le formulaire d'identification est soumis, donc validé. Pourtant le passage devrait être barré. A ce titre, si vous consultez l'Url dans la barre d'adresse du navigateur, vous notez qu'elle est complétée par les paramètres incomplets des renseignements demandés : index.htm?nomUtil=Vaillant&mdp=. Ces paramètres sont susceptibles d'être exploités par un code serveur comme le Php pour vérifier l'existence de la paire en base de données. C'est seulement ainsi que l'accès peut ensuite être ouvert. L'attribut Html qui permet de changer ce comportement dans un formulaire (form) se nomme required (obligatoire). Et il ne demande aucun paramètre.
- A la fin des balises Input de saisie, ajouter l'attribut required comme suit :
<form class="conteneur" action="index.htm">
<div class="section">
<label><b>Nom d'utilisateur</b></label>
<input class="zoneSaisie margeBas" type="text" placeholder="Taper votre nom d'utilisateur" name="nomUtil" required>
<label><b>Mot de passe</b></label>
<input class="zoneSaisie" placeholder="Tapez votre mot de passe" name="mdp" required>
<button class="bouton bloc bleu section decalage" type="submit">Identification</button>
<input class="caseCocher margeHaut" type="checkbox" checked="checked"> Se souvenir de moi
</div>
</form>
...
- Enregistrer les modifications et basculer sur la page Web,
- Actualiser le navigateur (F5) puis cliquer sur le bouton Login,
- Ensuite, cliquer directement sur le bouton Identification pour soumettre le formulaire,
Comme vous pouvez le voir, lorsque des renseignements sont manquants, cette fois la route est effectivement barrée. Les zones de saisie sont encapsulées dans le formulaire (form). En raison de la présence de cet attribut required attaché aux deux zones, l'événement de soumission (submit) est refusé. Mais ce n'est pas tout, l'accent est automatiquement mis sur les informations à compléter.
Encoder la saisie du mot de passe
Maintenant, dans les améliorations que nous devons envisager, il est tout à fait naturel d'apporter une solution pour que les caractères du mot de passe saisi ne soient pas visibles par une tierce personne. Et pour encoder ce mot de passe, c'est encore un attribut Html qui donne la réplique. L'attribut Type accompagné de la valeur Password permet de transformer la zone de texte en une zone de saisie spécifiquement dédiée aux mots de passe.
- Revenir dans l'éditeur Notepad sur le code de la page Html,
- Dans la seconde zone de texte du formulaire, ajouter l'adaptation Html suivante :
<form class="conteneur" action="index.htm">
<div class="section">
<label><b>Nom d'utilisateur</b></label>
<input class="zoneSaisie margeBas" type="text" placeholder="Taper votre nom d'utilisateur" name="nomUtil" required>
<label><b>Mot de passe</b></label>
<input class="zoneSaisie" type="password" placeholder="Tapez votre mot de passe" name="mdp" required>
<button class="bouton bloc bleu section decalage" type="submit">Identification</button>
<input class="caseCocher margeHaut" type="checkbox" checked="checked"> Se souvenir de moi
</div>
</form>
...
- Enregistrer les modifications et basculer sur la page Web,
- Actualiser le navigateur (F5) puis cliquer sur le bouton Login,
- Taper quelques caractères dans la zone du mot de passe,
Comme vous pouvez l'apprécier, la saisie est désormais cryptée pour l'oeil humain mais reste totalement limpide pour le code qui doit l'exploiter.
Aspect du bouton de validation
Nous avons donc bien avancé pour un usage professionnel d'un formulaire Web. Il nous reste un dernier peaufinage à envisager. Le bouton d'identification doit occuper la largeur totale disponible. Ainsi, nous offrirons plus de clarté et d'ergonomie à l'utilisateur. Nous n'avons qu'à régler l'attribut Css widht. Le bouton d'identification est associé aux styles : bouton, bloc, bleu, section et decalage. Mais le style bloc n'existe pas encore. C'est lui que nous devons créer et implémenter.
- Revenir dans l'éditeur Notepad sur le code de la feuille de styles cette fois,
- Sous le style zoneSaisie par exemple, créer le style bloc comme suit : .bloc{width:100%;},
- Enregistrer les modifications et basculer sur la page Web,
- Actualiser le cache du navigateur (CTRL + F5) puis cliquer sur le bouton Login,
Les 100% de largeur rejettent naturellement la case à cocher sur la ligne du dessous. Et comme vous pouvez l'apprécier, nous avons rendu un formulaire d'identification Web totalement fonctionnel et professionnel grâce aux syles Css et à certains attributs Html.
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
