← Back to all snippets

Multi-step Native HTML Forms

Published 📅: ....
Last modified 📝: ....
Location 📍: Portland, OR

Share this snippet on BlueskySee discussion on Bluesky

If you have a multi-step form and you want to allow the user to go back a step without writing client side JS to manage the current step, you can use another type="submit" button with a special name, value, and importantly formNoValidate attributes:

<button
  type="submit"
  // this can be any value you want
  name="back"
  // again can be any value you want
  value="true"
  // ✨✨✨
  // allow form submissions even if there are required form fields
  // not currently filled in
  // ✨✨✨
  formNoValidate
>
  Go Back
</button>

This tip works with plain old HTML forms, and can also work with React forms (server actions/functions, server components, etc)!

Tags:

snippetHTMLReact

Loading...