Usually, the parent <form> element dictates where the data goes (action) and how it gets there (method). But what if you have a single form that needs to support two completely different submit actions? For example, an e-commerce cart that has a "Save for Later" button and a "Checkout Now" button inside the exact same box.
HTML5 solves this by allowing specific Input Form Attributes to be placed directly on the submit buttons (<input type="submit">). These attributes override the rules of the parent form.
The formaction attribute overrides the parent form's action URL. This allows a single form to submit its payload to entirely different backend scripts depending on which button the user clicks.
<form action="/default-action.php">
<label for="doc">Document Title:</label>
<input type="text" id="doc" name="title"><br><br>
<!-- Submits to /default-action.php -->
<input type="submit" value="Publish">
<!-- Overrides! Submits to /save-draft.php -->
<input type="submit" formaction="/save-draft.php" value="Save as Draft">
</form>Just like formaction changes the destination, the formmethod attribute overrides the parent form's method (switching between GET and POST).
<!-- Form defaults to a secure POST request -->
<form action="/database-manager.php" method="POST">
<label for="username">Search Database:</label>
<input type="text" id="username" name="userid"><br><br>
<!-- Button 1 uses the default POST method to permanently delete -->
<input type="submit" value="Delete User">
<!-- Button 2 overrides to GET just to safely view the user data -->
<input type="submit" formmethod="GET" value="Search User">
</form>When you place the required attribute on an input field, the browser will block the form from submitting if the field is empty. But what if you want to allow users to save their progress halfway through without throwing an error?
Adding the formnovalidate attribute to a submit button tells the web browser to completely ignore all validation rules (like required, min, or email formatting) when that specific button is clicked.
<form action="/process.php">
<!-- This field is strictly required! -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Will block submission if email is empty or invalid -->
<input type="submit" value="Finalize & Submit">
<!-- Will ignore the 'required' rule and submit freely! -->
<input type="submit" formnovalidate value="Save Progress">
</form>Try clicking "Submit Registration" with an empty box, then try clicking "Save Progress".
There are a few other, less common override attributes available:
formtarget="_blank": Forces the result page to open in a new tab instead of the current one, overriding the main target attribute.formenctype="multipart/form-data": Changes how the data is encoded when shipped. (This is strictly required when your form includes a button that uploads physical files like images or PDFs).