HTML formaction Attribute

Photo Credit to CodeToFun

🙋 Introduction

The formaction attribute in HTML is a powerful tool that allows developers to specify the URL where the form data should be sent when the form is submitted.

This attribute is applied to the <button> or <input> elements within a form and provides a way to override the default form action.

🎯 Purpose of formaction

The primary purpose of the formaction attribute is to give developers more flexibility in handling form submissions. Instead of always submitting the form to the URL specified in the form's action attribute, you can dynamically set the destination URL for a specific button or input element.

💎 Values

The formaction attribute accepts a URL as its value, allowing you to define a specific endpoint for the form submission. This can be an absolute or relative URL. The specified URL will override the form's default action only for the button or input element to which the formaction attribute is applied.

📄 Example

Let's look at a simple example of how to use the formaction attribute in an HTML form:

formaction.html

Copied

<form action="/default-handler" method="post">
  <input type="text" name="username" placeholder="Enter your username">

  <input type="submit" value="Submit to Default Handler">
  <input type="submit" value="Submit to Custom Handler" formaction="/custom-handler">
</form>

🧠 How it Works

In this example, there are two submit buttons within the form. The first button will submit the form to the default handler specified in the action attribute of the form.

The second button, however, will override the default action and submit the form to a custom handler specified by the formaction attribute.

🔄 Dynamic Values with JavaScript

Similar to other attributes, you can dynamically set the formaction attribute using JavaScript.

This can be useful when you want to change the form submission behavior based on certain conditions or user interactions. Here's a brief example:

formaction.html

Copied

<script>
  // Dynamically set formaction for a button
  document.getElementById("dynamicButton").formaction = "/dynamic-handler";
</script>

🧠 How it Works

In this script, the formaction attribute is set to "/dynamic-handler" for a button with the id "dynamicButton." This dynamic approach allows you to adapt the form submission URL based on runtime conditions.

🏆 Best Practices

• Use the formaction attribute when you need specific buttons within a form to submit data to different endpoints.
• Be cautious when dynamically setting the formaction attribute, ensuring it aligns with your application's logic and security requirements.
• Always provide a default form action using the action attribute in case the user's browser does not support or execute JavaScript.

🎉 Conclusion

The formaction attribute provides a convenient way to customize the form submission URL for specific buttons or input elements within an HTML form.

By understanding how to use this attribute effectively, you can enhance the functionality and versatility of your web forms.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Telegram 450

Author

👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All