HTML input form attributes allow individual <button> or <input type="submit"> controls inside a single form to override the default parent <form> tag attributes (action, method, enctype, target, novalidate).
Individual submit controls can direct form submissions to different backend routes or method verbs:
<form action="/save-draft" method="POST" id="user-form">
<input type="text" name="content">
<!-- Submits using default form action (/save-draft) -->
<button type="submit">Save Draft</button>
<!-- Overrides form action and method to publish directly -->
<button type="submit" formaction="/publish" formmethod="POST">Publish Post</button>
<!-- Submits form without running browser validation -->
<button type="submit" formaction="/cancel" formnovalidate>Cancel</button>
</form>
Key form override attributes:
formaction: Overrides the parent form's action URL destination for this specific submit button.formmethod: Overrides the HTTP method (GET or POST).formtarget: Overrides the target submission frame (_blank, _self).formenctype: Overrides the encoding type (e.g. switching to multipart/form-data).formnovalidate: Bypasses input validation rules when clicking that specific button.form: Associates an input element located outside the <form> wrapper back to its parent form ID.flowchart TD
A["Form Parent: action='/save' method='POST'"] --> B["Click 'Save Draft' Button -> Posts to /save"]
A --> C["Click 'Publish' Button (formaction='/publish') -> Posts to /publish"]
A --> D["Click 'Preview' Button (formtarget='_blank') -> Opens response in New Tab"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Input Form Attributes Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Multi-Action Article Editor</h2>
<form action="/api/draft" method="POST" style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 500px;">
<div style="margin-bottom: 1rem;">
<label for="article-title" style="display: block; margin-bottom: 0.5rem;">Article Title:</label>
<input type="text" id="article-title" name="title" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155;">
</div>
<div style="display: flex; gap: 10px;">
<button type="submit" style="background-color: #475569; color: #ffffff; padding: 8px 14px; border: none; border-radius: 4px; cursor: pointer;">
Save Draft
</button>
<button type="submit" formaction="/api/publish" style="background-color: #2563eb; color: #ffffff; padding: 8px 14px; border: none; border-radius: 4px; cursor: pointer;">
Publish Now
</button>
</div>
</form>
</body>
</html>
formaction for multi-button forms: Ideal for editor forms containing "Save Draft", "Publish", and "Delete" actions inside the same form interface.formnovalidate on "Save Draft" or "Cancel" buttons: Allows users to save partial draft inputs without triggering required field validation errors.form="form-id" attribute for complex layouts: Allows placing submit buttons in fixed headers or sidebars outside the physical <form> element boundary.Create a submit button inside a form that overrides the default form destination using formaction="/preview" and formtarget="_blank"!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.