Quiz 10 — Formulaires (2) & validation
⏱️ TL;DR — 50 questions sur input groups, floating labels, disposition et validation (Partie 6). Réponds de tête, puis déplie.
1. Classe pour accoler un préfixe à un champ ?
Réponse
input-group (+ input-group-text).
2. Élément du préfixe/suffixe ?
Réponse
input-group-text.
3. Agrandir un input group ?
Réponse
input-group-lg.
4. Un champ prix avec « € » à droite ?
Réponse
input-group + input + input-group-text (€).
5. Barre de recherche avec bouton ?
Réponse
input-group + input + btn.
6. Classe pour un label flottant ?
Réponse
form-floating.
7. Que faut-il impérativement sur le champ d’un floating label ?
Réponse
Un placeholder (même vide).
8. Ordre HTML champ/label pour le floating ?
Réponse
Champ d’abord, label après.
9. Floating label + select : possible ?
Réponse
Oui.
10. Floating label : nécessite du JS ?
Réponse
Non, 100 % CSS.
11. Sur quoi repose la disposition d’un formulaire ?
Réponse
La grille (row + col).
12. Label horizontal aligné ?
Réponse
col-form-label.
13. Espacer les champs d’une row ?
Réponse
g-* (ex. g-3).
14. Colonnes qui s’ajustent au contenu (form en ligne) ?
Réponse
row-cols-auto (ou -lg-auto).
15. Prénom/nom sur 2 colonnes dès md ?
Réponse
Deux col-md-6 dans row g-3.
16. Classes qui colorent un champ valide/invalide ?
Réponse
is-valid / is-invalid.
17. Où mettre le message d’erreur ?
Réponse
invalid-feedback (ou valid-feedback).
18. Classe qui déclenche le style après validation native ?
Réponse
was-validated (sur le form).
19. Pourquoi novalidate ?
Réponse
Désactiver les bulles natives, garder le style Bootstrap.
20. Approche recommandée en React ?
Réponse
Valider par l’état (React Hook Form + Zod) + is-invalid conditionnel.
21. Feedback en tooltip ?
Réponse
invalid-tooltip (dans un parent position-relative).
22. Méthode JS pour vérifier la validité native ?
Réponse
form.checkValidity().
23. Contraintes de validation natives, exemples ?
Réponse
required, type="email", pattern, min.
24. Marquer un champ invalide sans JS ?
Réponse
is-invalid + invalid-feedback.
25. Marquer un champ valide sans JS ?
Réponse
is-valid + valid-feedback.
26. Input group avec un select ?
Réponse
input-group + form-select + input.
27. Préfixe ET suffixe sur un même champ ?
Réponse
Deux input-group-text autour de l’input.
28. Double espacement (mb-3 + g-3) : problème ?
Réponse
Espacement irrégulier — choisir une stratégie.
29. Pourquoi factoriser un long formulaire en composants React ?
Réponse
Réutiliser la structure col+label+control.
30. Un floating label sans placeholder : que se passe-t-il ?
Réponse
Le label ne « flotte » pas correctement.
31. Rendre un champ obligatoire ?
Réponse
Attribut required.
32. Icônes de validation dans les champs : option Sass ?
Réponse
$enable-validation-icons.
33. Label téléphone horizontal aligné, structure ?
Réponse
col-form-label + colonne du champ dans une row.
34. Un formulaire en ligne compact : classe sur la row ?
Réponse
row row-cols-lg-auto g-2 align-items-center.
35. checkValidity() renvoie quoi ?
Réponse
true/false selon la validité.
36. was-validated sans novalidate : effet ?
Réponse
Le navigateur affiche aussi ses bulles (doublon).
37. Un champ prix avec € et $ des deux côtés ?
Réponse
Deux input-group-text encadrant l’input.
38. Floating label sur un textarea : contrainte ?
Réponse
Fixer une hauteur (style height).
39. La validation Bootstrap change-t-elle la logique métier ?
Réponse
Non, c’est du style + un helper de vérif natif.
40. Un input group taille small ?
Réponse
input-group-sm.
41. Le message d’erreur s’affiche quand ?
Réponse
Quand le champ a is-invalid (ou après was-validated).
42. Grille de formulaire : espacement recommandé ?
Réponse
g-3 sur la row.
43. Un bouton d’envoi sur toute la largeur d’un form grid ?
Réponse
Dans un col-12 + w-100.
44. Floating label + input group : compatibles ?
Réponse
Partiellement, avec précautions (cas avancé).
45. Où placer le texte d’aide dans un form grid ?
Réponse
Dans la colonne du champ, en form-text.
46. Réutiliser la validité en React Hook Form : avantage ?
Réponse
Logique React idiomatique + style Bootstrap.
47. Validation serveur : quelle approche Bootstrap ?
Réponse
Ajouter is-valid/is-invalid selon la réponse.
48. Un select requis vide, comment le marquer ?
Réponse
required + is-invalid si non choisi.
49. form-floating fonctionne avec quel type de contrôle ?
Réponse
input, textarea, select.
50. Résumé : deux approches de validation ?
Réponse
Native (needs-validation/was-validated) et manuelle (is-valid/is-invalid).
Quiz suivant : Quiz 11 — Utilitaires (1).