Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Why formaction attribute is not working outside of tag?
The formaction attribute can work outside the <form> tag by using the form attribute to associate external buttons with a specific form. The formaction attribute specifies an alternate action URL for form submission, allowing multiple submit buttons to send data to different server endpoints.
How Formaction Works
When you submit a form, the browser follows this priority order −
-
First − Check for
formactionattribute on the submit button -
Second − Use the
actionattribute on the<form>element - Default − Submit to the current page if neither is specified
Syntax
Following is the syntax for using formaction inside a form −
<button type="submit" formaction="URL">Button Text</button>
Following is the syntax for using formaction outside a form −
<button type="submit" formaction="URL" form="formId">Button Text</button>
Using Formaction Inside Form
Here is an example of the formaction attribute with three different submit buttons inside a form −
<!DOCTYPE html>
<html>
<head>
<title>HTML formaction attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>User Registration Form</h2>
<form method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" style="margin: 5px;"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" style="margin: 5px;"><br><br>
<button type="submit" formaction="save.php" style="margin: 5px; padding: 8px;">Save Draft</button>
<button type="submit" formaction="validate.php" style="margin: 5px; padding: 8px;">Validate</button>
<button type="submit" formaction="submit.php" style="margin: 5px; padding: 8px;">Submit</button>
</form>
</body>
</html>
Each button submits the same form data to a different server script based on its formaction value.
Using Formaction Outside Form
You can place buttons outside the form and still use the formaction attribute by associating them with the form using the form attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML formaction Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Contact Form</h2>
<form method="post" id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" style="margin: 5px;"><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="3" style="margin: 5px;"></textarea><br>
</form>
<div style="margin-top: 20px;">
<h3>Action Buttons (Outside Form)</h3>
<button type="submit" formaction="save_draft.php" form="contactForm" style="margin: 5px; padding: 8px;">Save Draft</button>
<button type="submit" formaction="send_email.php" form="contactForm" style="margin: 5px; padding: 8px;">Send Email</button>
<button type="submit" formaction="print_preview.php" form="contactForm" style="margin: 5px; padding: 8px;">Print Preview</button>
</div>
</body>
</html>
The key is using form="contactForm" to link the external buttons to the form with id="contactForm".
Why Form Attribute Is Required
The formaction attribute only works on submit buttons that are associated with a form. When buttons are outside the <form> tag, the browser needs the form attribute to know which form the button should submit.
Without the form attribute, external buttons are not connected to any form and the formaction will have no effect.
Comparison of Approaches
| Button Location | Required Attributes | Use Case |
|---|---|---|
| Inside <form> |
type="submit", formaction="URL"
|
Simple forms with multiple submission options |
| Outside <form> |
type="submit", formaction="URL", form="formId"
|
Complex layouts where buttons need flexible positioning |
Browser Compatibility
Both the formaction attribute and the form attribute are supported in HTML5. The form attribute works with <button>, <input>, <select>, <textarea>, and other form control elements.
Conclusion
The formaction attribute can work outside the <form> tag when combined with the form attribute to associate external buttons with a specific form. This approach provides flexible form layouts while maintaining multiple submission endpoints for the same form data.
857 Views
