In this lesson, you'll learn how to control and adjust where form data is sent and how different buttons or attributes can alter the form submission behavior. Understanding these variations allows you to build more dynamic and flexible forms.

What Is a Form Action?

The action attribute in a <form> tag specifies the URL where the form data is sent when the form is submitted. This URL can be a server-side script or any endpoint that processes the data. The method attribute (typically "GET" or "POST") determines how the data will be transmitted.

Basic Syntax:

<form action="https://example.com/submit-data" method="POST">
  <!-- form elements -->
</form>

Variations in Form Actions

There are several ways to vary the form action to accommodate different scenarios:

1. Multiple Submit Buttons

Sometimes a form might need to perform different actions depending on which submit button is clicked. By giving each submit button a name and a distinct value, the server-side script can determine which button triggered the submission.

Example:

Explanation:

• Both buttons submit the form to the same URL.
• On the server side, you check the value of the action parameter to decide whether to save changes or delete the account.

2. Using the target Attribute

The target attribute in a form allows you to specify where to display the response after the form is submitted. For example, you can open the response in a new tab or window.

Example:

Explanation:

• The target="_blank" attribute opens the form submission result in a new browser tab or window.
• This can be useful when you want users to remain on the original page after submitting the form.

3. Dynamic Form Actions (Concept Overview)

In some cases, you might want the form action to change based on user input or other conditions. Although this typically involves JavaScript, it’s important to understand that the default behavior of forms can be extended dynamically. For example, a form might use JavaScript to modify its action attribute before submission, directing data to different endpoints based on user selections.

Note: This lesson focuses on HTML-only techniques, but keep in mind that dynamic actions are achievable with a small amount of JavaScript when needed.

By leveraging these form action variations, you can build more versatile and user-friendly web forms. Practice these techniques to see how they can best serve your application's needs.