Multi-step form

One long form, read one <fieldset> at a time. Without the script every step shows at once and the form still submits, so the steps are a way through the form rather than the form itself.

Basic

<form data-wizard>
  <fieldset>
    <legend>Account</legend>
    <label data-field><span>Email</span><input type="email" name="email" required></label>
    <label data-field><span>Password</span><input type="password" name="password" minlength="8" required></label>
  </fieldset>
  <fieldset>
    <legend>Project</legend>
    <label data-field><span>Name</span><input name="project" required></label>
    <label data-field><span>Repository</span><input name="repo"><small>Owner and name, as user/atlas.</small></label>
  </fieldset>
  <fieldset>
    <legend>Review</legend>
    <p>One project, one repository, one person. People can be added once it exists.</p>
  </fieldset>
  <button type="submit">Create</button>
</form>

Next checks the step it is leaving before it moves on, so an error is found where it was made.

Notes

• s72.js reads the legends into an ol[data-steps], the steps component, marking the finished ones data-state="done" and the one in hand aria-current="step".
• Next runs reportValidity() over the current fieldset's fields, so the browser's own message opens on the first field that fails.
• On the last step, Next wears the form's submit button's words and submits the form; the submit button itself is hidden.
• Focus moves to the new legend, which takes tabindex="-1" for the purpose, so a screen reader reads the step it has arrived at.