Multi-Step Form
Formulaire en plusieurs étapes
Un formulaire en plusieurs étapes divise une tâche longue en pages plus petites. Il vérifie les réponses avant de les envoyer.
Un autre exemple
Un formulaire de projet enregistre chaque réponse et permet à l'utilisateur de revenir en arrière. Il affiche une page de révision et un reçu après la soumission.
Parties principales
- 01Étape actuelle
- 02Objectif de la page
- 03Retour et continuer
- 04Brouillon enregistré
- 05Validation et révision
- 06Réception de la soumission
Utilisez-le lorsque
Utilisez-le lorsqu'une tâche est trop longue pour une seule page ou qu'elle comporte un ordre et une étape de révision significatifs.
Ne l'utilisez pas lorsque
Ne divisez pas un formulaire court juste pour ajouter des étapes. Conservez les réponses lorsque les gens reviennent, actualisent ou reviennent plus tard.
Nom utilisé dans le code
ordered steps + saved draft + validation + review + one final submit Avant d'expédier
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Formulaire en plusieurs étapes (Multi-Step Form). User context: Un formulaire de projet enregistre chaque réponse et permet à l'utilisateur de revenir en arrière. Il affiche une page de révision et un reçu après la soumission. Recommended pattern: Formulaire en plusieurs étapes (Multi-Step Form). Why it fits: Utilisez-le lorsqu'une tâche est trop longue pour une seule page ou qu'elle comporte un ordre et une étape de révision significatifs. Do not use it when: Ne divisez pas un formulaire court juste pour ajouter des étapes. Conservez les réponses lorsque les gens reviennent, actualisent ou reviennent plus tard. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Aucun standard officiel unique ne régit l’ensemble du terme. Sa signification peut varier selon les équipes, plateformes ou frameworks. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Formulaire en plusieurs étapes (Multi-Step Form) is used now. Definition: Un formulaire en plusieurs étapes divise une tâche longue en pages plus petites. Il vérifie les réponses avant de les envoyer. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.