Input HarborISSUE #9 of 46

input form attributes · formaction · formmethod

FormaVSCaptain Invalid Input

Forma saysForm-override attributes on a button — formaction, formmethod, formtarget — let one button submit differently from its form.

Sometimes a form needs two submit buttons that behave differently — "save draft" vs "publish". Put formaction, formmethod, or formtarget on the button and it overrides the form's own attributes for that submission only.

This avoids splitting one logical form into two just to hit different endpoints. The override applies solely to the button that was clicked.

Power-ups you unlock

formaction overrides the form action for one button
formmethod / formtarget override method / target too
Lets two submit buttons send to different places
Only the clicked button’s overrides apply

Captain Invalid Input attacks — common mistakes

Duplicating an entire form just to change the endpoint
Putting formaction on a non-submit button (no effect)
Forgetting the override is per-button, not per-form

Boss battleAdd two submit buttons to one form: one posts to "#draft", the other to "#publish", via formaction.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#publish" method="post">
    <p><label>title <input name="t"></label></p>
    <button>publish</button>
    <button formaction="#draft">save draft</button>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Input Attributes · Required · Placeholder · Pattern Autocomplete · How The Browser Remembers ›