The working example has three equipment-request steps: requester, quantity with an optional note, and review. It retains answers during Back navigation, rejects invalid values on Next, and clears local completion as soon as an answer changes. Completing the local review displays “No request sent” because this page performs only a local review.
Give each step one bounded job
Start with empty fields on Step 1. The requester label is required and accepts 1–40 characters after outside spaces are trimmed. Use synthetic values for demonstration; the preset fills Avery, quantity 2 and “For workshop.” Applying it is an input change and clears any earlier completion message.
Step 2 requires a whole quantity from 1 through 3 and offers a note up to 120 characters. The note is optional. Step 3 shows all current values, with “No note supplied” when that field is empty. These limits belong to this prototype; the quantity is not an inventory lookup, and the requester label is not an account or delivery address.
Validate the step being left
Next checks the active group. A blank requester stays on Step 1 with a specific message. Quantities 0, 4 and 1.5 stay on Step 2. Back returns without requiring the current group to be repaired first, preserving whatever the reader entered. That allows corrections in a useful order.
Before local completion, check all groups again and return to the relevant step if anything is invalid. Do not silently substitute a default quantity, shorten a long response or turn the optional note into a requirement. The review must use the actual current inputs, not a second copy captured during an earlier visit.
Test the two-to-three correction
Load the sample, advance to review and inspect Avery, 2 and For workshop. Go Back, replace 2 with 3 and advance again. The review now shows 3. Remove the note and it shows No note supplied. Returning to Step 1 still leaves Avery in its input.
Activate “Review complete locally” only after reviewing those current values. The confirmation repeats that no request was sent and contains no fabricated booking or confirmation number. An answer edit invalidates the earlier completion immediately. Mere navigation without an edit may preserve the completion because the reviewed answers have not changed.
Make the transition understandable
W3C WAI's multi-page forms guidance recommends logical control groups and clear progress information. Each view here has a visible Step N of 3 heading. On a successful transition the heading receives focus; on an error the invalid field receives focus and points to the message. Hidden steps use the hidden attribute so their controls do not remain active in the normal keyboard sequence.
Use explicit click handlers rather than relying on a form submit. This example is intended for a script-permitting sandbox where form submissions may be blocked. Its buttons say what they do: Next, Back, Reset and Review complete locally. The page has no receiver or network operation behind that final label.
Keep temporary review and delivery distinct
Reset clears inputs, review text, errors and completion, then returns to the first step. Reload can also clear the page; navigation retention is in memory only. Keep the HTML and its behavior notes as the prototype's source materials, and verify the actual keyboard sequence in its intended host.
If this becomes a real request workflow, define the recipient, delivery mechanism, validation and data-handling requirements separately. A successful local review supplies none of those decisions. Keep the prototype useful by showing precisely which answers were reviewed and what the final action accomplished.
Copy this prompt
Create a complete original HTML example in US English for this task: Multi-step form HTML template. Return one self-contained HTML file. Include all styles, data and JavaScript in the file. Use no remote dependencies. Return the working page, not an outline.
Offline equipment-request demonstration, three steps. Start blank. Requester trimmed 1–40 characters. Quantity whole 1–3. Optional note 0–120 characters. Synthetic preset Avery, 2, For workshop. Changing 2 to 3 must show 3 in review. Empty note displays No note supplied. Final button Review complete locally, explicit No request sent, no confirmation ID.
Implement stateful Next/Back navigation with hidden inactive sections and Step N of 3 text. Next validates only the active group; Back preserves current inputs even if invalid. Rebuild the review from inputs on every entry and revalidate all groups before local completion. Any edit or preset clears stale review/completion immediately; navigation alone need not. Move focus to the new heading or first invalid field, associate errors and announce step/status changes. Use type-button click handlers, not submit events. Reset clears inputs/errors/review/completion and returns Step 1. Keep the no-request instruction visible. No network, storage, equipment reservation or delivery claim.
Use a page design suited to this particular task, readable text at least 16 px, generous spacing, visible keyboard focus and explicit labels. At 360 px, stack the content without page-level horizontal scrolling. Use type="button" click handlers for actions. Keep source facts and sample results distinct from actual observations. Leave unknown details visible rather than inventing them. Controls update only this temporary page; distinguish local changes from actual records. Provide concise task-specific feedback and a reset that clears entered answers and stale results.
Walk back through a corrected request
Before adapting the prototype, complete the Avery example with quantity 2, return to the quantity step and change it to 3. Render the HTML prototype in NOS when reviewing that revised request with a colleague, and read the rebuilt summary aloud. Repeat with an overlong note and confirm that the note receives focus with its error message. Decide the actual recipient and delivery behavior before connecting a real request service.