Dans la conception de formulaires Web, la validation des entrées est un lien clé pour garantir que les utilisateurs soumettent des données valides. HTML5 introduit les attributs min et max de l'élément <input> , permettant de limiter la plage de saisie numérique sur le front-end. CSS3 étend encore cette fonctionnalité en permettant aux développeurs de fournir un retour visuel pour les entrées qui se trouvent dans ou en dehors d'une plage prédéfinie via :in-range et :out-of-range . Cet article détaillera comment utiliser ces deux pseudo-classes pour améliorer l'expérience utilisateur de validation des entrées.
Lorsqu'un utilisateur remplit un formulaire, certains champs doivent répondre à des plages numériques spécifiques. Par exemple, l’âge ne peut pas être un nombre négatif et les résultats des tests doivent être compris entre 0 et 100. Une validation de plage appropriée indique instantanément à l'utilisateur si sa saisie est valide.
L'élément <input> de HTML5 prend en charge les attributs min et max , permettant aux développeurs de définir les valeurs minimales et maximales des champs de saisie. Combinées avec type="number" ou type="range" , ces propriétés peuvent créer des limites sur les entrées numériques.
Le sélecteur de pseudo-classe :in-range est utilisé pour sélectionner les champs de saisie dont la valeur actuelle se situe dans la plage définie par min et max .
En revanche, le sélecteur de pseudo-classe :out-of-range est utilisé pour sélectionner les champs de saisie dont les valeurs actuelles sont en dehors de la plage définie par min et max .
Voici un exemple HTML et CSS montrant comment utiliser :in-range et :out-of-range :
<formulaire>
<label for="age">Âge (0-120) :</label>
<input type="number" id="age" name="age" min="0" max="120">
<span class="error-message">Âge invalide</span>
<input type="submit" value="Soumettre">
</form> /* Style de saisie valide*/
entrée : dans la plage {
bordure : 2 px, vert uni ;
}
/* Style de saisie invalide */
entrée : hors plage {
bordure : 2px rouge uni ;
}
/* Style du message d'erreur*/
.message d'erreur {
couleur : rouge ;
affichage : aucun ;
}
entrée : hors plage + .message d'erreur {
affichage : bloc ;
}En définissant différentes couleurs de bordure ou couleurs d'arrière-plan pour les entrées valides et non valides, vous pouvez aider les utilisateurs à identifier visuellement si l'entrée répond aux exigences.
Lorsque vous utilisez :in-range et :out-of-range , assurez-vous que les styles fonctionnent aussi bien sur tous les appareils et toutes les tailles d'écran pour que votre formulaire reste cohérent et utilisable.
Outre le style visuel, les besoins des utilisateurs de technologies d’assistance doivent également être pris en compte. Par exemple, utilisez l'attribut aria-invalid="true" pour fournir un contexte supplémentaire aux lecteurs d'écran.
Combinées aux fonctionnalités de validation de formulaire de HTML5, les pseudo-classes :in-range et :out-of-range peuvent être utilisées avec :valid et :invalid pour fournir un retour visuel plus riche pour la validation du formulaire.
:in-range et :out-of-range sont prises en charge par la plupart des navigateurs modernes, mais peuvent ne pas être reconnues dans certains navigateurs plus anciens. Ceci doit être pris en compte lors de la conception.
Dans les applications Web réelles, les pseudo-classes :in-range et :out-of-range peuvent être utilisées dans divers scénarios, notamment les formulaires d'inscription, les formulaires de connexion, les formulaires de paramètres, etc.
Bien que les pseudo-classes CSS puissent fournir un retour visuel statique, leur combinaison avec JavaScript peut créer des interactions plus dynamiques, telles qu'une validation instantanée et un retour d'information lors des entrées de l'utilisateur.
Lors de la conception de votre formulaire, assurez-vous de suivre les meilleures pratiques en matière d'accessibilité, telles que l'utilisation d'étiquettes claires, un contraste raisonnable et des marquages de champ appropriés.
:in-range et :out-of-range sont deux outils puissants en CSS qui peuvent aider les développeurs à améliorer le retour visuel pour la validation des entrées et à améliorer l'expérience utilisateur. Grâce à l'introduction de cet article, vous devriez être en mesure de comprendre les concepts de base et l'utilisation de ces deux pseudo-classes, et d'apprendre comment les appliquer à la conception réelle de formulaires Web. N'oubliez pas qu'une bonne conception de formulaire ne consiste pas seulement à mettre en œuvre des fonctionnalités, mais également à fournir une interface claire, intuitive et facile à utiliser.
En explorant davantage l'utilisation des pseudo-classes :in-range et :out-of-range , vous pouvez créer des formulaires esthétiques et fonctionnels qui répondent aux besoins des applications Web modernes. J'espère que cet article pourra devenir une ressource précieuse lorsque vous utilisez CSS pour améliorer la conception de votre formulaire.
Ceci conclut cet article sur la façon dont les pseudo-classes CSS :in-range et :out-of-range améliorent le retour visuel pour la validation des entrées. Plus de CSS associés :in-range et :out-of-range Pour le contenu de pseudo-catégorie, veuillez effectuer une recherche. articles précédents sur downcodes.com ou continuez à parcourir les articles connexes ci-dessous. J'espère que vous soutiendrez davantage downcodes.com à l'avenir !