Créer un formulaire aux labels dynamiques

Plus un formulaire est moderne, plus il est engageant. Voyons dans cet article comment réaliser un formulaire aux labels dynamiques qui permettra d'augmenter l'engagement de vos formulaires et qui donnera envie à vos utilisateurs de le remplir.

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.

1ère étape

Pour créer un formulaire aux labels dynamiques, il faut avoir un formulaire ! Créons donc un formulaire HTML, en englobant chacun de nos inputs dans une classe input-form.

<div class="input-form">
    <input type="email" name="email" id="email"
        placeholder=" " />
    <label for="email">Adresse email</label>
</div>

<div class="input-form">
    <input type="password" name="password" id="password"
        placeholder=" " />
    <label for="password">Mot de passe</label>
</div>

<div class="submit-form">
    <button type="submit">Connexion</button>
</div>

2ème étape

Styliser le formulaire et ses champs email et password.

.input-form {
    display: flex;
    flex-direction: column-reverse;
    margin: 1.2em 0;
}

input, label, button {
    transition: .3s;
}

label {
    transform: translate(10px, -15px);
    cursor: text;
    transform-origin: left top;
    position: absolute;
}

input {
    padding: 10px;
    border: none; outline: none;
    border-bottom: 2px solid grey;
}

Nous allons directement utiliser flexbox pour centrer un input avec son label, ce qui permettra ensuite grâce à la propriété translate de poser celui-ci directement sur l'input.

3ème étape

Stylisons maintenant le bouton de notre formulaire.

button {
    border: 0; padding: 10px 15px;
    cursor: pointer; color: white;
    background-color: #ff9234;
}

button:focus, button:hover {
    background-color: #d92027;
}

.submit-form {
    text-align: right;
}

4ème étape

Il nous suffit maintenant d'ajouter le comportement dynamique des labels. Pour ça, nous allons nous servir des placeholders de nos inputs, et notamment du comportement par défaut qu'ils ont avec le navigateur.

Nous allons cacher le placeholder grâce à opacity: 0, ce qui fait qu'il est présent, mais pas affiché.

On se sert de ce subterfuge pour placer le label du formulaire selon que le placeholder soit totalement masqué ou non (ce qui veut dire que l'utilisateur a entré une valeur ou qu'il a cliqué sur l'input).

Tout ça grâce au sélecteur CSS ~ qui permet de sélectionner le label qui suit l'input (et donc de ne pas sélectionner tous les labels).

input::placeholder {
    opacity: 0;
}

input:focus,
input:not(:placeholder-shown) {
    border-bottom: 2px solid red;
}

input:not(:placeholder-shown) ~ label,
input:focus ~ label {
    transform: translate(10px, -30px) scale(.8);
    padding-left: 0;
    color: black;
}