Ionic - 10.8 Démarrer le formulaire de nouvelle offre
Cette leçon commence la création d'un formulaire permettant de publier une nouvelle offre. Nous gardons la structure en grille de la page, puis ajoutons les champs du titre, de la description et du prix. Chaque label est flottant pour rester lisible pendant la saisie.
Préparer la grille
On retire le contenu précédent de la page de nouvelle offre, mais on conserve la grille. La première colonne reçoit une taille de 6 pour les petits écrans, avec un décalage de 3.
Chaque bloc du formulaire est placé dans une ligne et une colonne de même taille.
Titre et description
Le titre est un ion-item contenant un ion-label avec le texte Titre, suivi d'un champ de saisie. La description suit la même logique, avec une zone de texte multiligne de trois lignes.
Les deux labels reçoivent la position flottante, comme dans les leçons précédentes.
Le prix
Le prix reprend la structure du titre. On copie le bloc, puis on modifie le type du champ en number et le texte du label.
En résumé
Le formulaire de nouvelle offre repose sur la grille de la page et sur des ion-item contenant chacun un label et un champ. Le titre, la description et le prix suivent la même structure. La leçon suivante ajoutera les messages d'erreur.
Points clés
- La grille de la page est conservée pour structurer le formulaire.
- Chaque champ est placé dans un ion-item avec un ion-label.
- Les labels reçoivent la position flottante.
- Le prix utilise un champ de type number.
- La description utilise une zone de texte multiligne de trois lignes.
Questions fréquentes
Pourquoi garder la grille pour un formulaire ?
Elle organise les champs sur la page et conserve la mise en page du reste de l'application.
Pourquoi le champ prix est-il de type number ?
Ce type limite la saisie aux nombres, ce qui évite de saisir du texte dans un champ de prix.
Où sont les messages d'erreur ?
Ils sont ajoutés dans la leçon suivante, qui termine le formulaire.