HTML Input Form Attributes

HTML Input Form Attributes: Per-Button Overrides and External Inputs

HTML provides a set of form* attributes for input and button elements that override the parent form settings or connect fields placed outside the form tags. These attributes are especially handy when one form has two actions—such as Save Draft and Publish Now.

Overriding Parent Form Behavior per Button

When a user clicks a specific submit button, attributes on that button take precedence over the enclosing form tag:

• formaction: Sends the form to an alternate URL (for example, /posts/draft vs /posts/publish).
• formmethod: Overrides the HTTP method (get or post) for that button only.
• formnovalidate: Skips HTML5 required/pattern validation on that button—ideal for "Save Draft" or "Cancel" buttons.
• formtarget: Opens the response of that specific submission in a new tab (_blank) for previews.
• form="form-id": Connects an input, select, textarea, or button located anywhere else on the page to a specific form by matching its id.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Input Form Attributes Demo</title>
</head>
<body>
    <form id="article-form" action="/articles/publish" method="post">
        <label for="post-title">Article Title</label>
        <input id="post-title" name="title" type="text" required>

        <div style="margin-top: 12px;">
            <button type="submit">Publish Now</button>
            <button type="submit" formaction="/articles/draft" formnovalidate>Save Draft</button>
        </div>
    </form>

    <!-- Linked to #article-form even though outside the form tag -->
    <div style="margin-top: 12px;">
        <label for="post-tag">Category Tag</label>
        <input id="post-tag" name="tag" type="text" form="article-form">
    </div>
</body>
</html>

Common Mistakes to Avoid

• Using formaction on type="button": Form override attributes only trigger on submit controls (type="submit" or type="image").
• Forgetting that form="id" still relies on unique IDs: If two forms share an ID, external inputs cannot bind reliably.
• Skipping server authorization on alternate formaction endpoints: Secure /draft and /publish routes equally on the backend.

Frequently Asked Questions

When is formnovalidate most useful?

Use formnovalidate on a "Save Draft" button so users can save half-finished work without filling out every required field first.

Can an input outside a form tag really submit with the form?

Yes. Setting form="my-form-id" attaches any external input or submit button directly to the form whose id is my-form-id.