How do you build a multi-step form with native HTML?

Building a Multi-Step Form with Native HTML

A multi-step form in HTML breaks a long form into smaller, more manageable sections (steps). This improves user experience by guiding users through the form one stage at a time. You can achieve this natively with <form>, <fieldset>, and a little bit of JavaScript to switch between steps.

Key Points About Multi-Step Forms

1
Use <fieldset> to group each step of the form.
2
Show only one <fieldset> (step) at a time.
3
Use buttons with JavaScript to move Next and Previous between steps.
4
Native validation (required, email, etc.) still works step by step.

Example of Multi-Step Form

Difficulty: 5/10

Topics: form navigation, state preservation, validation

Scenario Questions

0-2 years experience

1
Imagine you need a simple three‑step sign‑up flow and you can only use HTML. How would you structure the markup so the user can move from step 1 to step 2 without JavaScript?
2
If you place a required <input> in the second step, what happens when the user submits the first step’s form, and how can you prevent a validation error?

2-5 years experience

1
We tried splitting a checkout process into three separate <form> elements on the same page, but only the fields from the last form are sent to the server. Why does this happen, and how would you fix it using native HTML?
2
Explain the trade‑offs between using multiple pages with the action attribute versus using a single <form> with <fieldset> and hidden inputs to carry data forward.

5-8 years experience

1
Design a reusable multi‑step form pattern that works across browsers, supports HTML5 validation, and preserves user input when they navigate back, all without JavaScript. What elements and attributes would you choose, and how would you handle edge cases like a browser refresh?
2
How would you ensure accessibility (screen readers, focus order) for a native HTML multi‑step form, and what ARIA roles or attributes would you add?

8+ years experience

1
Our platform has dozens of legacy multi‑step forms built with server‑side page reloads. We want to standardize on a native‑HTML approach that can be shared across teams. What architectural guidelines, naming conventions, and testing strategy would you propose to roll this out safely?
2
When integrating analytics (e.g., step‑completion events) into a pure‑HTML multi‑step form, how would you instrument the markup without adding JavaScript, and what long‑term maintenance considerations arise?

Follow-up Questions

❓What would you change if you needed to support file uploads in the middle step?
❓How does the browser’s built‑in validation interact with hidden inputs that carry previous step data?
❓Can you describe how you’d test this flow across different browsers and assistive technologies?