Input à label flottant
Un champ de saisie moderne avec un espace réservé qui apparaît en douceur sous forme d'étiquette lorsqu'il est mis au point.
Aperçu
Cas d’utilisation et fonctionnalités
Les étiquettes flottantes sont une interface utilisateur de formulaire de saisie moderne et peu encombrante, couramment utilisée dans Material Design et d’autres applications.
-
Gain de place : Peut également servir d’étiquette et d’espace réservé, économisant ainsi de l’espace vertical même lorsque l’espace sur l’écran est limité.
-
Clarification du contenu d’entrée : Les utilisateurs voient toujours ce que signifie un champ (étiquette), à la fois pendant et après la saisie, afin que les utilisateurs ne soient jamais confus.
-
Interactions sophistiquées : Une animation en douceur de l’étiquette mise au point fournit un retour visuel efficace à l’utilisateur indiquant que l’entrée est désormais disponible.
Points de conception et d’UX
-
Placeholder hack : Utilise la pseudo-classe
:placeholder-shownpour déterminer le statut (saisie ou non) en utilisant uniquement CSS, sans utiliser de JavaScript. (*placeholder=" "du côté HTML est une exigence obligatoire) -
Assurer la visibilité : Lorsque l’étiquette est relevée, la visibilité est maintenue en réduisant la taille de la police (
scale(0.75)) et en appliquant une police en gras (font-weight : 500) et une couleur de thème. -
Accessibilité : En liant l’attribut
forde l’élémentlabelet l’idde l’élémentinput, il prend en charge les lecteurs d’écran et le mouvement de focus lorsque vous cliquez sur l’étiquette. De plus, « pointer-events : none » est spécifié afin que l’étiquette n’interfère pas avec l’opération.
Comment personnaliser
Vous pouvez ajuster les points suivants en fonction du système de conception de votre projet.
-
Coloration : Changez la couleur de
.fli-input:focuset.fli-input:focus ~ .fli-label(actuellement#6366f1) par la couleur de la marque. -
Coins arrondis et ombres : En modifiant
border-radiusetbox-shadowde.fli-input, vous pouvez vous ajuster à un design plus plat ou à un design plus arrondi et plus pop. -
Taille de police : Si vous ajustez la taille de la police ou le taux de réduction (« scale(0,75) ») de l’étiquette, veuillez également affiner le « remplissage » (en particulier la valeur supérieure) de « .fli-input » afin que l’étiquette et le texte saisi ne se chevauchent pas.
##Code d’implémentation
<div class="fli-group">
<input type="text" id="username" class="fli-input" placeholder=" " required />
<label for="username" class="fli-label">nom d'utilisateur</label>
</div>
<style>
.fli-group {
position: relative;
width: 100%;
max-width: 320px;
}
.fli-input {
width: 100%;
padding: 1.5rem 1.25rem 0.5rem;
font-size: 1rem;
font-family: inherit;
color: #0f172a;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
outline: none;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.fli-input:hover {
border-color: #cbd5e1;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}
.fli-input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: #ffffff;
}
.fli-label {
position: absolute;
top: 1.1rem;
left: 1.25rem;
font-size: 1rem;
color: #64748b;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: left top;
}
/* Entrée ou statut terminé */
.fli-input:focus ~ .fli-label,
.fli-input:not(:placeholder-shown) ~ .fli-label {
transform: translateY(-0.6rem) scale(0.75);
color: #6366f1;
font-weight: 500;
}
/* Floue mais toujours saisie */
.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {
color: #475569;
}
</style>État de compatibilité du navigateur
-
Chrome : dernière version
-
Safari : dernière version
-
Firefox : dernière version
-Edge : Dernière version
La pseudo-classe :placeholder-shown est prise en charge par tous les navigateurs modernes et peut être utilisée en toute sécurité.