Share
Dans la prochaine série de notre série consacrée à l'apprentissage des tenants et les aboutissants de Material Design Lite (MDL), nous examinerons le composant Champs de texte. Un champ de texte peut être utilisé dans un formulaire de recherche, un commentaire ou un formulaire de contact, et nous le voyons souvent en conjonction avec l'élément button.
En fait, le composant de champs de texte dans MDL est similaire au composant de bouton; c'est une amélioration d'un élément html standard pour l'adapter à l'esthétique et aux spécifications de Material Design. Encore une fois, avant de commencer, vous devrez inclure les bibliothèques MDL - les feuilles de style et le JavaScript - dans le document. tête.
Commençons par quelques bases.
Pour implémenter le composant champ de texte, nous commençons avec un vide div avec mdl-textfield et mdl-js-textfield classes, enveloppé dans un forme élément. Si vous avez suivi nos précédents articles de cette série, vous devez déjà connaître le modèle de dénomination de classe dans MDL. Dans ce cas, le mdl-textfield classe applique les améliorations visuelles du CSS, tandis que le mdl-js-textfield applique un comportement dynamique via JavaScript.
Dans le div, nous ajoutons un contribution élément (ou peut-être un zone de texte) et une étiquette (obligatoire) ainsi que la classe appropriée nécessaire pour appliquer les styles.
C'est tout ce qu'on peut en dire; nous venons de construire un champ de saisie de texte de base avec un composant de champ de texte MDL!
Il est à noter que le mdl-textfield__input classe nous avons ajouté à la contribution L'élément ne fonctionnera bien que s'il est appliqué à un type de saisie textuelle tel que texte, mot de passe, email, tel, url, et chercher. Appliquer la classe à un contribution élément de type Couleur, rendez-vous amoureux, ou fichier pourrait donner un résultat très étrange.
De plus, le texte de l'étiquette apparaîtra également étrange si nous ajoutons également du texte de substitution:
Le champ de saisie avec espace réservéNous pouvons améliorer l’élément d’entrée avec Étiquette flottante. Lorsque l’utilisateur se concentre sur le champ de saisie, l’étiquette va flotter vers le haut, à l’écart du curseur. L’étiquette flottante est un motif de plus en plus courant dans la conception des formulaires, en particulier dans le paysage mobile où l’espace est limité..
MDL a rendu très facile l’application de ce motif. Retour au code HTML précédent, nous devons ajouter le mdl-textfield - étiquette flottante classe à la div récipient.
Bingo! Notre champ de saisie de texte devrait maintenant être plus agréable visuellement avec l'étiquette flottante:
le Champ de saisie extensible est un autre modèle de conception commun que nous pouvons implémenter dans MDL. Nous voyons d’abord l’entrée sous forme d’icône. Après avoir cliqué dessus, il se développera dans un champ de saisie. Nous trouvons généralement ce modèle de conception appliqué aux entrées de recherche.
Pour rendre notre entrée précédente extensible, nous devons ajouter le mdl-textfield - extensible classe à la div récipient. Nous emballons aussi le contribution élément et l'étiquette avec un nouveau div avec le mdl-textfield__expandable-holder classe attachée. Suite à ce workflow, nous changeons également le contribution type, l’étiquette de texte, ainsi que les attributs associés pour spécifier «recherche».
Ensuite, nous créons un bouton à l’extérieur du mdl-textfield__expandable-holder, utilisant un étiquette élément pointant vers l'entrée.
Les données de sécurité et de désinfection sont cruciales pour les formulaires. Nous ne voulons pas que nos utilisateurs soumettent des entrées avec un contenu incorrect ou même malveillant. Nous devons donc évaluer l'entrée de l'utilisateur dans le champ de saisie pour se conformer au type de saisie. Si la contribution est de email type, l’entrée doit respecter un format de courrier électronique: elle doit contenir @ et se termine par un TLD (domaine de premier niveau).
Heureusement, MDL nous aide immédiatement. Nous n'avons pas besoin d'ajouter de balisage supplémentaire ni de classes. Définissez l’entrée avec un type approprié, et le soulignement deviendra rouge si le formatage de l’entrée n’adhère pas au type d’entrée..
Une erreurMais nous pouvons également définir notre propre norme de formatage et également fournir un élément visuel qui affiche un message d'erreur. Par exemple:
Message d'erreur de saisie MDLPour afficher une notification d’erreur, nous devons d’abord définir des limites à ce que les utilisateurs peuvent saisir dans la liste. contribution élément à travers le HTML modèle attribut. L'attribut pattern prend une expression régulière (Regex) qui évaluera et validera l'entrée utilisateur.
Dans ce cas, j'aimerais que l'entrée de nom d'utilisateur soit alphabétique, sans espaces. Ainsi, nous allons spécifier le modèle attribuer avec le regex suivant: [A à Z, a-z] *.
Remarque: vous pouvez trouver des modèles Regex communs dans HTML5Pattern, tels que celui permettant de valider un courrier électronique, un mot de passe, des téléphones, des codes postaux et des dates.
Ensuite, nous ajoutons le message d'erreur sous l'étiquette à l'aide d'un envergure élément avec le mdl-textfield__error. Vous devrez peut-être également appliquer des règles de style pour ajuster sa position et l'alignement du contenu..
Nous sommes tous ensemble! Maintenant, l'entrée doit émettre un message d'erreur en dessous de l'entrée et la mettre en surbrillance en rouge si l'utilisateur entre des chiffres, des caractères spéciaux ou des espaces. Essayez:
Comme nous venons de le découvrir, le composant Champs de texte MDL nous permet d’implémenter facilement des champs de saisie attrayants avec des modèles de conception utiles, tels que étiquette flottante et champ de saisie extensible. Nous avons également découvert qu'il est facile d'ajouter un message d'erreur en cas de formatage incorrect.
Le prochain tutoriel devrait être un passionnant épisode de cette série. Nous allons examiner une étoile montante parmi les éléments de l'interface utilisateur, le Carte. Restez à l'écoute!
Accentsconagua