Quiz 09 — Formulaires (1)
⏱️ TL;DR — 50 questions sur les form controls, selects, checks, radios, switches et range (Partie 6). Réponds de tête, puis déplie.
1. Classe pour un input texte ?
Réponse
form-control.
2. Classe pour un <select> ?
Réponse
form-select.
3. Classe pour un label ?
Réponse
form-label.
4. Relier un label à un champ ?
Réponse
for du label = id du champ.
5. Le placeholder remplace-t-il un label ?
Réponse
Non, jamais.
6. Texte d’aide sous un champ ?
Réponse
form-text.
7. Grand / petit champ ?
Réponse
form-control-lg / form-control-sm.
8. Champ en lecture seule ?
Réponse
Attribut readonly.
9. Champ désactivé ?
Réponse
Attribut disabled.
10. Classe d’un textarea ?
Réponse
form-control (comme un input).
11. Select multiple ?
Réponse
form-select + attribut multiple.
12. Input fichier ?
Réponse
form-control sur type="file".
13. Input couleur ?
Réponse
form-control form-control-color.
14. Bootstrap 5 style-t-il l’input file nativement ?
Réponse
Oui (fini le hack custom-file de la v4).
15. Conteneur d’une case/radio ?
Réponse
form-check.
16. Classe de l’input d’une case ?
Réponse
form-check-input.
17. Classe du label d’une case ?
Réponse
form-check-label.
18. Transformer une case en interrupteur ?
Réponse
form-switch (+ role="switch").
19. Regrouper des radios ?
Réponse
Même attribut name.
20. Cases en ligne ?
Réponse
form-check-inline.
21. Transformer une case en bouton ?
Réponse
btn-check + un label btn.
22. Classe d’un curseur ?
Réponse
form-range.
23. Attributs d’un range ?
Réponse
min, max, step.
24. Aria requis sur un switch ?
Réponse
role="switch".
25. En React, un champ contrôlé prend quoi ?
Réponse
value + onChange.
26. En JSX, for s’écrit… ?
Réponse
htmlFor.
27. form-control change-t-il la logique du champ ?
Réponse
Non, c’est purement visuel.
28. Un champ sans label ni aria-label : problème ?
Réponse
Accessibilité (illisible aux lecteurs d’écran).
29. Case cochée par défaut ?
Réponse
Attribut checked.
30. Radio sélectionné par défaut ?
Réponse
Attribut checked.
31. btn-check requiert-il du JS Bootstrap ?
Réponse
Non, CSS pur.
32. Un groupe de radios contrôlé en React : combien de valeurs d’état ?
Réponse
Une seule (comparée à chaque value).
33. Select taille large ?
Réponse
form-select form-select-lg.
34. Nombre de lignes d’un textarea ?
Réponse
Attribut rows.
35. Input date ?
Réponse
form-control sur type="date".
36. aria-label sur un select sans label visible ?
Réponse
Oui, pour l’accessibilité.
37. Un switch « mode sombre » accessible ?
Réponse
form-check form-switch + role="switch" + label.
38. Trois options exclusives en ligne ?
Réponse
3 form-check form-check-inline (radios, même name).
39. Champ mot de passe ?
Réponse
form-control sur type="password".
40. Rendre une case obligatoire ?
Réponse
Attribut required.
41. Style d’un input focus ?
Réponse
Géré par Bootstrap (anneau de focus).
42. form-check-input sur radio ou case : même classe ?
Réponse
Oui.
43. Peut-on colorer un range ?
Réponse
Oui (via CSS accent-color / variables).
44. Un select de pays, grande taille : classes ?
Réponse
form-select form-select-lg.
45. Comment afficher plusieurs choix à cocher en colonne ?
Réponse
Plusieurs form-check (sans -inline).
46. Case indéterminée : géré comment ?
Réponse
Via JS (indeterminate = true).
47. Le label d’un btn-check doit pointer où ?
Réponse
Vers l’id de l’input (for).
48. Champ e-mail avec validation de type ?
Réponse
type="email".
49. Bootstrap fournit-il un date-picker riche ?
Réponse
Non — juste le style du champ natif.
50. Résumé : quatre familles de contrôles ?
Réponse
form-control, form-select, form-check, form-range.
Quiz suivant : Quiz 10 — Formulaires (2) & validation.