How to create an HTML form with multiple and different form actions using formaction attribute

When creating a form, there are times when you need multiple buttons with different form actions within that form to submit the form data to different URLs depending on which button the user clicked. Fortunately, HTML has an in-built formaction attribute that allows us to create such forms.

Example:

The form below serves as a login or signup form depending on which button the user clicks. The form sends the data to ‘/login’ or ‘/signup’ URL when the user clicks on the login or signup button respectively.

Click on the HTML and Result tabs to view the syntax and form respectively.

The URL in the formaction attribute, in this case /signup, will override the form’s action attribute, /login when the signup button is clicked.

About Me:
I am currently enrolled in Rocket Academy’s remote 24-week, full-time software engineering course, Software engineering 1 (SWE1), which prepares students like me for entry-level software engineering roles. If you are interested in a software engineering career and is someone who prefers a structured learning environment with coaches who have years of industry experience as software engineers, I highly recommend Rocket Academy’s SWE1 course as I am learning a lot from this course. Don’t take my word for it, check out their website and the portfolio of the instructors to find out more. For the more outgoing, feel free to indicate your interest on the website to speak to one of the coaches.