• Home
  • Blog
  • Projects
  • Bookshelf
  • About
← 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...

Related Posts

snippet

Progressive Identifiers

Published: ....

Quick Git

Published: ....

Git Co-Authorship

Published: ....

useInterval

Published: ....

React

useInterval

Published: ....

Server Side Rendering Compatible CSS Theming

Published: ....

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

Resetting Controlled Components in Forms

Published: ....

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

Request for a (minimal) RSC Framework

Published: ....

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

Don't Break the Implicit Prop Contract

Published: ....

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

A Better useSSR Implementation

Published: ....

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

React Error Boundaries: Revisited

Published: ....

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

Suspense Plus GraphQL

Published: ....

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

Managing Complex UI Component State

Published: ....

A few thoughts on managing complex UI component state within React

Understanding React 16.3 Updates

Published: ....

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