Outils CSS/JS avancés

Quelques astuces CSS et JS avancées pour faire des choses pratiques..

Astuce pour éviter d’avoir à retaper le mot de passe

Idée générale

Il est courant dans les formulaire de faire taper le mot de passe à deux reprises afin de vérifier qu’on le tape bien correctement. Cette pratique est très ancienne mais est assez lassante, surtout quand le mot de passe est assez long et qu’on est pressé.
Une solution est alors de placer un bouton pour rendre le mot de passe visible.

On peut faire ceci de plusieurs façons :

Dans ce qui suit, c’est la première option qui est retenue : en effet, elle demande une action concrete, un clic, pour révéler le mot de passe. Il n’y a donc pas de risques que le mot de passe s’affiche à l’écran de façon accidentelle.

L’idée est d’obtenir quelque chose comme ceci : formulaire avec nom et mot de passe

Si on montre chaque élément, cela donne ceci : formulaire avec nom et mot de passe

Principe

Ici, on part du principe que le champ n’est pas situé dans le label comme on le voit parfois. Il reste lié au label par le biais des attributs for et id.

Dans le principe de fonctionnement, c’est très simple : le label et le champ sont sur des lignes différentes. Pour cela, pas besoin de les mettres dans un paragraphe : il suffit d’afficher le label en block, et le champ de placera en dessous de façon automatique.

Les champs feront ici 250 pixels de large.
Les champs de mot de passe feront 200 pixels et le bouton pour révéler le mot de passe mesurera 50 pixels de large.

Pour avoir un comportement homogène, tous ces éléments devront avoir la même hauteur, les mêmes bordures et les mêmes marges. Le code contient tout ça, qui constituera une sorte de mini-css-reset pour unifier tous les éléments.

Le code

Le HTML :

<label for="username">Choose an username:</label>
<input type="text" name="username" id="username" size="30" value="John Doe" placeholder="John Doe" />

<label for="password">Choose a password: </label>
<input type="password" name="password" id="password" class="password" size="30" value="Password" placeholder="Password" /><button type="button" class="unveilpw" onclick="revealpass('password');"></button>

Le CSS :

/* The small CSS-reset */

label,
input,
button.unveilpw {
   border: 0;
   height: 2.5em;
   padding: 0 5px;
   background: white;
   line-height: 2em;
   box-sizing: border-box;
}

input,
button.unveilpw {
   border-bottom: 1px solid silver;
}

label {
   display: block;
}
input {
   display: inline-block;
   width: 250px;
}
.password {
   width: 200px;
}
.unveilpw {
   width: 50px;
   background-color: rgba(0, 0, 0, .02);
}

/* Show/Hide text is put in CSS, so we can change it in CSS */
/* Password is hidden */
.unveilpw::before {
   content: "Show";
}

/* Unveiling activated */
input[type="text"]+.unveilpw::before {
   color: red;
   content: "Hide";
}

/* Focus effect: Blue border on field when focus */
input:focus,
input:focus+.unveilpw {
   border-bottom-color: #2196F3;
   box-shadow: 0px -1px 0px #2196F3 inset;
}

Le JavaScript :

'use strict'
function revealpass(fieldId) {
   var field = document.getElementById(fieldId);
   field.type = (field.type == "password") ? "text" : "password";
   field.focus();
   field.setSelectionRange(field.value.length, field.value.length);
}

Demo

Page créée un avril 2016. Mise à jour le samedi 2 avril 2016.
Adresse de la page : http://lehollandaisvolant.net/tuto/css-adv-1