Ionic - 10.3 Configurer un template de formulaire
Cette leçon montre comment configurer un template pour le formulaire d'authentification. On ajoute un champ de mot de passe, on adapte le type de chaque champ et on prépare les boutons. Le résultat doit correspondre au rendu attendu.
Ajouter le champ de mot de passe
Pour ajouter le champ de mot de passe, on copie le champ e-mail, puis on le renomme. On donne ensuite à cet input le type password.
Le champ e-mail reçoit lui aussi un type, email. Ce type permet d'afficher la configuration de clavier adaptée sur mobile, avec le symbole arobase disponible.
Configurer les boutons
Un bouton permet d'être redirigé vers l'inscription. Pour le moment, son comportement n'est pas encore défini, il sera ajouté plus tard.
Le mode fill est réglé sur clear, ce qui n'affiche que le texte du bouton. Le mode expand est réglé sur block pour les deux boutons, ce qui les centre dans la page.
<ion-button fill="clear" expand="block">Se connecter</ion-button>Organiser le formulaire avec la grille
Une grille gère l'affichage sur les petits écrans. Pour le formulaire, la colonne prend 6 colonnes avec un décalage de 3, ce qui la centre.
Les champs sont placés dans cette première colonne, puis une seconde colonne accueille les boutons. Le résultat correspond au rendu attendu.
<ion-col size-sm="6" offset-sm="3">En résumé
Le template du formulaire d'authentification reçoit un champ de mot de passe et un type adapté à chaque champ. Les boutons utilisent les modes clear et block, et la grille centre le contenu sur les petits écrans. La leçon suivante transforme ce template en formulaire basé sur un template.
Points clés
- Un champ de mot de passe se crée en copiant le champ e-mail et en utilisant le type password.
- Le type email adapte le clavier affiché sur mobile.
- Le mode clear n'affiche que le texte du bouton.
- Le mode block étend le bouton sur toute la largeur.
- La grille centre les champs sur petit écran grâce à size-sm et offset-sm.
Questions fréquentes
Pourquoi copier le champ e-mail pour créer le champ de mot de passe ?
Le champ e-mail sert de modèle : on le copie, on le renomme et on lui donne le type password.
À quoi servent les modes fill et expand ?
Le mode fill clear n'affiche que le texte du bouton, et le mode expand block le rend pleine largeur.
Que fait la grille ?
Elle organise le contenu sur les petits écrans. Ici, la colonne prend 6 colonnes avec un décalage de 3 pour centrer le formulaire.