formateur informatique

Formulaire d'identification Web avec les styles Css

Accueil  >  Technique  >  CSS  >  CSS Astuces  >  Formulaire d'identification Web avec les styles Css
Livres à télécharger


Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Inscription Newsletter    Abonner  Youtube    Vidos astuces Instagram
Sujets que vous pourriez aussi aimer :


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.

Formulaire Web d-identification Html et Css

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. Nous trouvons le fichier de la page Web. Il est nommé index.htm. Il est accompagné de sa feuille de styles dans le sous dossier Css et de l'avatar pour la console d'identification dans le sous dossier img.
  • Double cliquer sur ce fichier index.htm pour l'ouvrir dans le navigateur par défaut,
Nous retrouvons la page Web de la présentation avec le bouton de Login.
  • Cliquer sur ce bouton pour afficher le formulaire d'identification,
Formulaire identification à construire avec les styles Css et les propriétés Html

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 ++,
Nous accédons ainsi à la structure Html de la page Web. La référence à la feuille de styles (mes-styles.css) est clairement annoncée en entête de code.

...
<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 ++,
Au milieu de la feuille de styles, nous trouvons effectivement le style boite.

.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 :
background-color:rgba(0,0,0,0.4);

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,
Voile d-opacité derrière la boîte de dialogue grâce aux styles Css

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,
Le calque imbriqué dans cette boîte de dialogue bdg est associé au style boite-contenu. C'est lui qui gère le contenu de la boîte de dialogue.
  • Basculer l'affichage dans le code de la feuille de styles,
.boite-contenu
{
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;
C'est une astuce Css intéressante. Le conteneur fait 100% de la largeur. Avec l'attribut margin réglé sur la valeur auto, le calque enfant (la boîte de dialogue) ajuste ses marges gauche et droite pour se centrer dans cette largeur.
  • 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 l'apprécier, nous progressons pas à pas. En plus du voile d'opacité, des bords arrondis et de l'ombre, la boîte de dialogue est désormais centrée sur la largeur de la page Web.



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 :
@keyframes animerzoom
{
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,
Centrer boîte de dialogue identification sur page Web et apparition avec effet de zoom

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,
Dans le calque associé au style boite-contenu, c'est un autre code Javascript, dans un span cette fois associé aux styles : bouton, tailleL, transparent et positionHautDroit qui permet de masquer la boîte de dialogue par clic sur la croix en basculant la propriété display sur la valeur none pour le calque conteneur bdg.

...
<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 :
width:100%;
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,
Nous le disions, nous progressons pas à pas. Le formulaire d'identification est de plus en plus avenant. En plus de son effet d'apparition et des autres styles réglés en amont, il met en évidence les zones dans lesquelles il est question de renseigner les informations requises.



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,
Attribut Html placeholder pour masquer le texte de guide à la saisie au début de la frappe

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,
Soumission refusée car champs du formulaire non renseignés grâce aux propriétés Html

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,
Mot de passe encrypté sur formulaire identification Web Html et Css

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%;},
Avec l'attribut width réglé à 100%, nous faisons en sorte que le bouton d'identification occupe toute la largeur disponible.
  • Enregistrer les modifications et basculer sur la page Web,
  • Actualiser le cache du navigateur (CTRL + F5) puis cliquer sur le bouton Login,
Etirer le bouton Html de login sur toute la largeur du formulaire d-identification Css

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



Abonnement à la chaîne Youtube
Partager la formation
Partager sur Facebook
Partager sur Twitter
Partager sur LinkedIn