• Home
  • Blog
  • Projects
  • Bookshelf
  • About
← Back to all snippets

Multi-step Native HTML Forms

Published ....
Last modified ....
From 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...

Related Posts

snippet

Progressive Identifiers

....

Quick Git

....

Git Co-Authorship

....

useInterval

....

React

useInterval

....

Server Side Rendering Compatible CSS Theming

....

A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!

Resetting Controlled Components in Forms

....

A quick way to handle resetting internal state in components when a parent form is submitted!

Request for a (minimal) RSC Framework

....

Some features and functionality that I'd like within a React Server Component compatible framework.

Don't Break the Implicit Prop Contract

....

React components have a fundamental contract that is often unstated in their implementation, and you should know about it!

A Better useSSR Implementation

....

Replace that old useState and useEffect combo for a new and better option!

React Error Boundaries: Revisited

....

Revising my previous blog post on React Error Boundaries and my preferred go-to implementation!

Suspense Plus GraphQL

....

A few thoughts on using Suspense with GraphQL to optimize application data loading

Managing Complex UI Component State

....

A few thoughts on managing complex UI component state within React

Understanding React 16.3 Updates

....

A quick overview of the new lifecycle methods introduced in React 16.3