Tutoriel : Animation des labels des éléments input en CSS

Animation de label pour les éléments inputs en CSS

Avez-vous déjà vu des formulaires sur certains sites web avec de belles animations de labels et vous vous êtes dit : "Wow, comment font-ils cela ?"; Cela m'est arrivé plusieurs fois. J'ai déjà vu plusieurs sites avec de beaux formulaires interactifs. Aujourd'hui, dans cet article, je vous propose le code pour animer vos labels comme illustré sur la photo ci-dessus.

Commencez par créer un fichier index.html et ajoutez le code suivant :

<!doctype html>
<html lang="fr">
  <head>
    <title>Animation input</title>
  </head>
  <body class=""></body>
</html>

Maintenant que notre fichier est prêt, il est temps d'ajouter le formulaire. Le formulaire contiendra un seul champ input pour le nom d'utilisateur (username) et l'étiquette (label) associée. Vous pouvez ajouter autant de champs que nécessaire, car en appliquant le CSS que nous verrons dans ce tutoriel, le résultat sera le même. Ajoutez le code suivant dans votre fichier index.html :

<!doctype html>
<html lang="fr">
  <head>
    <title>Animation input</title>
  </head>
  <body class="">
    <form>
      <div class="form-group">
        <input name="username" id="username" autocomplete="off" />
        <label for="username">Username</label>
      </div>
    </form>
  </body>
</html>

Notez que dans cet exemple, le label est placé avant le champ input. Cela est fait délibérément pour que nous puissions sélectionner le label avec du CSS lorsque le champ input est en focus. Si vous souhaitez en savoir plus sur les différents types de champs input, leurs attributs et bien plus encore, j'ai écrit un article pour vous aider à maîtriser les éléments input en HTML. J"ai également un autre article qui vous montre les différentes façons pour envoyer un fichier html avec votre server node.js.

Ajoutons un peu de style à notre formulaire :

form {
  width: 400px;
  padding: 1rem;
  background: #1f4172;
}
.form-group {
  position: relative;
  background: transparent;
}
input {
  position: relative;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  background: transparent;
  border: 2px solid #f1b4bb;
  border-radius: 10px;
}
label {
  position: absolute;
  top: 50%;
  transform: translate(1rem, -50%);
  background: transparent;
  pointer-events: none;
  color: #fff;
  transition: all 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

Le label pour l'élément input est positionné en mode "absolu" ici. Cela nous permet non seulement de le centrer verticalement, mais aussi de contrôler son comportement lorsque le champ est en focus. Ajoutez le CSS suivant à votre code pour obtenir le résultat souhaité :

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  top: 0;
  left: 1rem;
  background-color: #1f4172;
}

Ce bout de CSS signifie simplement ceci : lorsque le champ input est en focus, nous voulons que le label soit positionné en haut de ce dernier.

Conclusion

Dans cet article je vous ai montré comment créer une animation du label de vos éléments input. En utilisant les techniques de CSS que j'ai présentées, vous pouvez ajouter des animations de labels élégantes à vos formulaires HTML. Celles ci améliorent l'esthétique de vos formulaires et offrent une meilleure expérience utilisateur.