From 6302d52e5de313c5eda5f74ec23cd705ccd21397 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sat, 1 Aug 2026 20:06:58 +0530
Subject: [PATCH 1/8] feat(core): support formaction=${action} on submitters
 (#1207)

---
 .../webjs/references/muscle-memory-gotchas.md |   3 +-
 AGENTS.md                                     |   4 +-
 packages/core/src/form-action.js              | 363 ++++++------------
 packages/core/src/render-client.js            | 148 ++++---
 packages/core/src/render-server.js            | 304 ++++++++-------
 .../form-action-attr-guard-client.test.js     |   2 +-
 .../rendering/form-action-attr-guard.test.js  |  28 +-
 .../form-action-binding-client.test.js        |   2 +-
 .../rendering/form-action-binding.test.js     |  43 ++-
 packages/server/src/check.js                  |   4 +-
 packages/server/src/form-dispatch.js          |   3 +-
 .../server/test/routing/form-dispatch.test.js |  34 ++
 test/bun/form-action-guard.mjs                |  29 +-
 .../bun/form-action-submitter-parity.test.mjs |  44 +++
 .../app/docs/migrating-from-nextjs/page.ts    |   2 +-
 .../app/docs/progressive-enhancement/page.ts  |   2 +-
 website/app/docs/server-actions/page.ts       |   2 +-
 website/app/docs/troubleshooting/page.ts      |   2 +-
 18 files changed, 529 insertions(+), 490 deletions(-)
 create mode 100644 test/bun/form-action-submitter-parity.test.mjs

diff --git a/.agents/skills/webjs/references/muscle-memory-gotchas.md b/.agents/skills/webjs/references/muscle-memory-gotchas.md
index c4bd5808d..a06526679 100644
--- a/.agents/skills/webjs/references/muscle-memory-gotchas.md
+++ b/.agents/skills/webjs/references/muscle-memory-gotchas.md
@@ -83,7 +83,8 @@ The bound, refused, and allowed shapes in full. Every "no" row is a binding that
 | `action=${fn}` unquoted, on a `<form>` | **no, it BINDS** | the one supported shape: the identity is resolved and emitted as a hidden field, nothing is stringified |
 | `action=${fn}` on any other tag | yes | `action` submits nothing off a `<form>`, so it is an ordinary attribute and the function would be stringified |
 | `action="${fn}"`, or a mixed `action="/x/${fn}"` | yes | quoting turns a binding hole back into a plain attribute |
-| `formaction=` anywhere | yes | not supported YET rather than impossible (tracked in #1207). Today, write one form per action, or bind one action and dispatch on a submit button's `name="intent"` |
+| `formaction=${fn}` unquoted, on a submitter inside a bound form | **no, it BINDS** | per-submitter server action binding (#1207): emits `<button name="__webjs_action" value="<hash>/<fn>">` and server dispatches to last submitter in DOM order |
+| `formaction=${fn}` on an UNBOUND form | yes | submitter action requires enclosing form to be bound (`<form action=${formAction}>`) so POST method and multipart encoding are set at form start |
 | `.action=` on a native form | yes | the supported binding is the plain attribute, and a `.prop` on a native element drops at SSR, so accepting it would mean a form that submits under JS and does nothing without it |
 | `.method=` / `.enctype=` / `.encoding=` on a BOUND form | yes | the same reason one level over. All three are reflected IDL attributes, so SSR drops the binding and emits `method="post"` while a browser ends at what you assigned. Write them as plain attributes |
 | a second `action=${fn}` on one form | yes | SSR emits the second as a plain url next to the identity field, the client takes the last. Bind exactly one, in either position |
diff --git a/AGENTS.md b/AGENTS.md
index f653c9415..bffbae85d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -226,7 +226,7 @@ lit-html parity: `repeat` (keyed lists), `unsafeHTML(str)` (trusted raw HTML, **
 
 ### `html` expression prefixes
 
-`<div>${x}</div>` text child; `class=${x}` attribute (escaped); `action=${importedAction}` on a `<form>` binds a server action (#1155: the ONE function-valued attribute hole, the attribute is omitted so the form posts to the page's own url, `method="post"` + an enctype are supplied, and a hidden `__webjs_action` identity field is emitted; a quoted `action="${fn}"`, a `formaction=${fn}`, or `action=${fn}` on any other tag is a render error, since stringifying a function would leak a server action's source); `@click=${fn}` event listener (client-only, drops at SSR); `.value=${v}` DOM property (round-trips through SSR on custom elements via `data-webjs-prop-*`, drops on native elements); `?disabled=${b}` boolean attribute. Event/property/boolean holes **must be unquoted** (invariant 4). Every hole is identical server and client except `@event` and `.prop` on native elements.
+`<div>${x}</div>` text child; `class=${x}` attribute (escaped); `action=${importedAction}` on a `<form>` or `formaction=${importedAction}` on a `<button>` inside a bound form binds a server action (#1155, #1207: the function-valued attribute holes where the attribute is omitted/rewritten and a `__webjs_action` identity is emitted; a quoted `action="${fn}"` / `formaction="${fn}"` or `action=${fn}` on un-supported tags is a render error, since stringifying a function would leak a server action's source); `@click=${fn}` event listener (client-only, drops at SSR); `.value=${v}` DOM property (round-trips through SSR on custom elements via `data-webjs-prop-*`, drops on native elements); `?disabled=${b}` boolean attribute. Event/property/boolean holes **must be unquoted** (invariant 4). Every hole is identical server and client except `@event` and `.prop` on native elements.
 
 ---
 
@@ -462,7 +462,7 @@ const result = await optimistic(liked, true, () => likePost(postId));
 
 11. **No em-dashes (U+2014), no hyphen or semicolon used as pause-punctuation in prose, and no colon attached to a code-shaped LHS.** Banned as a pause: U+2014, a space-surrounded hyphen between words, a space-surrounded semicolon between words. Banned colon attachments: a colon-then-prose after `xyz()`, a `<my-tag>`, an `[expr]` subscript, or a `<code>foo()</code>` definition list (rephrase verb-led). Prefer a period, comma, a colon on a plain-noun LHS, parentheses, or a restructure. Plain hyphens stay fine in compound words, flags, filenames, ranges; semicolons and colons stay fine inside code / TS / JSON / CSS. The same hook also enforces brand casing with one simple rule: `WebJs` is a proper noun, so write it capitalized wherever it NAMES the project in prose, at a sentence start AND mid-sentence (`WebJs ships`, `Most WebJs apps`, `the WebJs serializer`). It stays lowercase `webjs` ONLY as a literal code token: a `webjs <subcommand>` CLI command (`webjs dev`, `webjs db migrate`), a `webjs.dev` domain, an `@webjsdev` package, a `"webjs"` config key, a `WEBJS_*` env var, the `webjsdev/webjs` org path, or anything inside a `` `code` `` span or fenced block. If you mean the literal config key or command in prose, wrap it in backticks. Enforced via `.claude/hooks/block-prose-punctuation.sh`, which scans only NEW content (you can still edit an existing line to fix a glyph or casing).
 
-12. **A form that writes binds its action: `<form action=${importedAction}>`** (#1155). That is the only shape the renderer reads, and every near-miss throws rather than producing a form that posts nowhere: a quoted `action="${fn}"`, a `formaction=${fn}` on a submit button (write one form per action, #1207), `action=${fn}` on any tag other than `<form>`, a bound form declaring `method="get"` or an enctype the server cannot parse, a `.method` / `.enctype` / `.encoding` PROPERTY binding on a bound form (a `.prop` drops at SSR and applies in the browser, so the form would submit differently with JS than without), a second `action` hole on one form, a plain `action="/url"` attribute alongside the bound hole (SSR keeps it and the client drops it, so the no-JS submission would post somewhere else), a whitespace-padded `method=" post "` (an enumerated attribute is matched against exact keywords, so a padded value falls to the invalid-value default and submits as a GET), and a function that is not a `'use server'` export. WebJs supplies `method` and `enctype` only where your template supplies neither, judged from the TEMPLATE rather than the rendered element: `?method=${false}` emits nothing so it is supplied, while `method=${null}` emits `method=""` and is refused. An `encoding=` attribute is inert in HTML (only the `.encoding` PROPERTY aliases `enctype`), so both renderers ignore it. A page has no `action` export, so a bare `<form method="post">` is a `405`. **The near-miss guarantee is form-level and stops at the submitter:** a button's `formmethod` / `formenctype` is seen by neither renderer, so `<form action=${fn}><button formenctype="text/plain">` submits fine with JS and is a bare 405 without it. That gap and per-button `formaction=${fn}` are both #1207.
+12. **A form that writes binds its action: `<form action=${importedAction}>`, or a submitter button `<button formaction=${importedAction}>` inside a bound form** (#1155, #1207). That is the shape the renderer reads, and every invalid shape throws rather than producing a form that posts nowhere: a quoted `action="${fn}"` / `formaction="${fn}"`, `action=${fn}` on any tag other than `<form>`, a `formaction=${fn}` submitter on an unbound form or carrying its own `name` attribute or on an `<input type="image">`, a bound form or submitter declaring `method="get"` / `formmethod="get"` or an enctype the server cannot parse (`formenctype="text/plain"`), a `.method` / `.enctype` / `.encoding` PROPERTY binding on a bound form, a second `action` hole on one form, a plain `action="/url"` attribute alongside the bound hole, and a function that is not a `'use server'` export. WebJs supplies `method` and `enctype` only where your template supplies neither. Without JS, per-button action binding emits `<button name="__webjs_action" value="<hash>/<fn>">` and server `form-dispatch.js` takes the last `__webjs_action` entry in DOM order (submitter precedence). A page has no `action` export, so a bare `<form method="post">` is a `405`.
 
 ---
 
diff --git a/packages/core/src/form-action.js b/packages/core/src/form-action.js
index b070871a5..3176642b1 100644
--- a/packages/core/src/form-action.js
+++ b/packages/core/src/form-action.js
@@ -31,21 +31,23 @@ import { escapeAttr } from './escape.js';
  * `<form>` all refuse, so there is exactly one way to write this and no
  * silently-broken near-miss.
  *
- * `formaction=${fn}` on a submit button is refused because it is not supported
- * YET, not because it cannot work. It is legal HTML and a per-submitter
- * identity has a workable channel (the submitter's own `name`/`value` pair,
- * which a browser submits only for the button that was pressed), so this is a
- * scoping line rather than a mechanism limit. Tracked in #1207. Refusing beats
- * ignoring, because an ignored `formaction` is a button that silently runs the
- * wrong action. A form per action, or one action dispatching on a button's
- * `name="intent"`, is the shape to write today.
- *
- * The refusals here are all FORM-level. A submitter's own `formmethod` /
- * `formenctype` can still defeat a bound form (`formenctype="text/plain"`
- * submits fine under JS, because the router posts FormData, and is a bare 405
- * without it), and neither renderer sees those today. That gap is #1207 as
- * well, and it is the one place the "no silently-broken near-miss" claim above
- * does not yet reach.
+ * `formaction=${fn}` on a submit button is supported when the enclosing `<form>`
+ * is also bound to a server action (`<form action=${formAction}>`), and the
+ * submitter does not carry its own `name` attribute. Without JS, the browser
+ * submits the pressed button's `name="__webjs_action"` value in the `FormData`.
+ * Server `form-dispatch.js` reads `formData.getAll("__webjs_action")` and takes
+ * the last entry, giving the pressed submitter precedence over the form's default
+ * action.
+ *
+ * Refused shapes on a submitter:
+ *   - A submitter carrying its own `name` attribute (static `name="..."` or
+ *     dynamic `name=${n}`), because a button cannot hold both its own name and
+ *     the `__webjs_action` identity.
+ *   - A `formaction=${fn}` submitter inside an unbound `<form>`, because POST
+ *     method and multipart encoding must be set on the form start tag.
+ *   - `<input type="image">`, because image submitters submit coordinate pairs
+ *     (`name.x`/`name.y`) instead of `name=value`.
+ *   - Submitter `formenctype="text/plain"` or `formmethod="get"` inside a bound form.
  *
  * Both SSR state machines and the client renderer import from here so the
  * rules cannot drift between them. Each renderer commits attribute, boolean
@@ -130,14 +132,9 @@ export async function resolveFormActionId(fn) {
 }
 
 /**
- * Is this hole the ONE supported form-action binding: an unquoted
- * `action=${fn}` on a `<form>`?
- *
- * Both halves matter. Unquoted, because quoting turns a binding hole back into
- * a plain attribute the renderer stringifies, and there is no way to bind half
- * an action into a url. On a `<form>`, because that is the only element whose
- * `action` submits anything; anywhere else the attribute is inert and binding
- * a function to it means the author expected something that will never happen.
+ * Is this hole a supported form-action binding:
+ *   - unquoted `action=${fn}` on a `<form>`
+ *   - unquoted `formaction=${fn}` on a `<button>` or `<input>` submitter
  *
  * @param {unknown} val the hole's resolved value
  * @param {string} attrName the AUTHORED attribute name (no sigil, unquoted branch)
@@ -146,8 +143,57 @@ export async function resolveFormActionId(fn) {
  */
 export function isBoundFormAction(val, attrName, tag) {
   if (typeof val !== 'function') return false;
-  if (String(attrName).toLowerCase() !== 'action') return false;
-  return String(tag || '').toLowerCase() === 'form';
+  const attr = String(attrName).toLowerCase();
+  const t = String(tag || '').toLowerCase();
+  if (attr === 'action') return t === 'form';
+  if (attr === 'formaction') return t === 'button' || t === 'input';
+  return false;
+}
+
+/**
+ * Refuse a submitter carrying its own `name` attribute alongside `formaction=${fn}`.
+ *
+ * @param {string} name
+ * @param {string} [tag]
+ */
+export function assertSubmitterHasNoName(name, tag) {
+  if (name && name !== FORM_ACTION_FIELD) {
+    throw new Error(
+      `[webjs] formaction=\${action} on <${tag || 'button'}> cannot be used when `
+      + `the element already carries a "name" attribute (found name="${name}"). `
+      + `Move the action to the enclosing <form action=\${action}> or remove the `
+      + `submitter's "name" attribute.`,
+    );
+  }
+}
+
+/**
+ * Refuse `<input type="image">` with `formaction=${fn}`.
+ *
+ * @param {string} [tag]
+ */
+export function assertSubmitterNotImage(tag) {
+  throw new Error(
+    `[webjs] formaction=\${action} is not supported on <input type="image"> `
+    + `because image submitters submit coordinate pairs (name.x/name.y) `
+    + `instead of name=value. Use <button> or <input type="submit"> instead.`,
+  );
+}
+
+/**
+ * Refuse a `formaction=${fn}` submitter whose enclosing form is not bound.
+ *
+ * @param {boolean} insideBoundForm
+ * @param {string} [tag]
+ */
+export function assertSubmitterFormIsBound(insideBoundForm, tag) {
+  if (insideBoundForm) return;
+  throw new Error(
+    `[webjs] formaction=\${action} on <${tag || 'button'}> requires the enclosing `
+    + `<form> to also be bound to a server action (e.g. <form action=\${formAction}>). `
+    + `The enclosing <form> must carry an action binding so POST method and `
+    + `multipart encoding are set at form start.`,
+  );
 }
 
 /**
@@ -224,38 +270,26 @@ export function assertNotFunctionReflectedActionProp(val, propName, tag) {
 export function assertIdentifiableAction(id, tag) {
   if (id) return id;
   throw new Error(
-    `[webjs] the function in action= on <${tag || 'form'}> is not a server action. `
+    `[webjs] the function in ${tag === 'button' || tag === 'input' ? 'formaction=' : 'action='} `
+    + `on <${tag || 'form'}> is not a server action. `
     + `Only a function imported from a 'use server' *.server.{js,ts} module can be `
-    + `bound to a form, because the identity the browser submits has to resolve `
+    + `bound, because the identity the browser submits has to resolve `
     + `back to something the server can run. Move the handler into a server `
     + `action and import it, or pass a url string.`,
   );
 }
 
 /**
- * The enctypes a form submission can actually be parsed from. `text/plain` is
- * legal HTML and useless here: the server parses a submission as multipart or
- * urlencoded, so a `text/plain` bound form runs under JS (the router sends
- * FormData) and is a bare 405 without it. That is precisely the
- * works-one-way-only near-miss this module refuses everywhere else, so it is
- * refused here too rather than silently corrected.
+ * The enctypes a form submission can actually be parsed from.
  */
-const PARSEABLE_ENCTYPES = new Set(['multipart/form-data', 'application/x-www-form-urlencoded']);
+export const PARSEABLE_ENCTYPES = new Set(['multipart/form-data', 'application/x-www-form-urlencoded']);
 
 /**
- * The shared refusal for a bound form whose own attributes contradict the
- * binding. Kept in one place because SSR reads the emitted start tag and the
- * client reads the live element, and the two must refuse identically.
+ * The shared refusal for a bound form whose own attributes contradict the binding.
  * @param {string | null | undefined} method
  * @param {string | null | undefined} enctype
  */
-function assertSubmittableForm(method, enctype) {
-  // Compared UNTRIMMED on purpose. `method` and `enctype` are enumerated
-  // attributes the browser matches against exact keywords with no whitespace
-  // stripping, so `method=" post "` falls to the invalid-value default and the
-  // form submits as a GET. Trimming here would accept the padded value, emit it
-  // untouched, and produce exactly the silently-posts-nowhere form this module
-  // exists to make impossible.
+export function assertSubmittableForm(method, enctype) {
   if (method != null && !/^post$/i.test(method)) {
     throw new Error(
       `[webjs] <form method="${method}" action=\${action}> cannot work: a bound `
@@ -279,39 +313,17 @@ function assertSubmittableForm(method, enctype) {
  * Rewrite a form's START TAG for a bound action and produce the hidden field
  * that must follow it.
  *
- * `startTag` is the already-committed `<form ...>` text, holes included, so
- * this reads the attributes the browser will actually see rather than the ones
- * the template literal spelled out. That matters for a hole-provided
- * `method=${m}`, which no scan of the source template could resolve.
- *
- * Three edits, none of them optional:
- *   - `action` is gone already (the caller drops it at the hole), so the form
- *     posts to the page's own url. Omitted rather than emitted as `action=""`,
- *     which the HTML spec treats as a conformance error.
- *   - `method="post"` when absent. A GET form puts its fields in the query
- *     string and sends no body, so a bound action would never run.
- *   - `enctype="multipart/form-data"` when absent, so a file input works on
- *     the no-JS path. Text-only fields round-trip identically either way.
- *
- * An explicit `method="get"` throws rather than being silently upgraded: the
- * author wrote two things that cannot both be true, and quietly picking one
- * hides the mistake.
- *
  * @param {string} startTag the emitted start tag, ending in `>`
  * @param {string} id the action identity
  * @returns {{ tag: string, hidden: string }}
  */
 export function bindFormActionStartTag(startTag, id) {
   const attrs = parseStartTagAttrs(startTag);
-  // The hole's own `action` is already gone. Anything still here is a SECOND,
-  // static one, which SSR would emit and the client would remove.
   assertConvergentBoundForm({ staticAction: attrs.has('action') });
   const resolved = resolveBoundFormAttrs(
     attrs.has('method') ? attrs.get('method') : ABSENT,
     attrs.has('enctype') ? attrs.get('enctype') : ABSENT,
   );
-  // The close is `>` or `/>`; a self-closing form is not valid HTML but the
-  // scanner can still hand one over, so keep whichever the author wrote.
   const close = startTag.endsWith('/>') ? '/>' : '>';
   const head = startTag.slice(0, startTag.length - close.length);
   let inject = '';
@@ -322,40 +334,16 @@ export function bindFormActionStartTag(startTag, id) {
 
 /**
  * Refuse the shapes a bound form can be written in that the two renderers can
- * never agree on, so neither ships a form that submits differently with JS than
- * without it.
- *
- * A `.prop` binding on a native element is DROPPED at SSR and applied for real
- * in the browser, where `method` / `enctype` / the `encoding` alias are
- * reflected IDL attributes. Measured: SSR of `<form action=${fn} .method=
- * ${'get'}>` emits `method="post"` while a browser ends at `method="get"`. No
- * amount of reconciliation closes that, because the client cannot un-know an
- * assignment it made and the server cannot know one it never saw. This is the
- * same argument that already refuses `.action` on a form.
- *
- * Two `action=${...}` holes on one form is the other: SSR emits the second as a
- * plain `action` url ALONGSIDE the identity field, which is incoherent, while
- * the client resolves last-wins.
- *
- * A STATIC `action="/url"` alongside the bound hole is the third, and it is the
- * one that fails quietly rather than loudly. SSR only drops the `action` the
- * HOLE wrote, so the static one survives into the emitted start tag, while the
- * client's reconcile calls `removeAttribute('action')` and takes it out. With
- * JS off the browser posts the identity to `/url`; with JS on the router posts
- * to the page. Same template, two different targets.
+ * never agree on.
  *
- * All three are properties of the template, so they are checked only once the
- * value proves the form is really bound. `<form action=${aString} .method=${m}>`
- * is an ordinary form and is left alone.
- *
- * @param {{ duplicateAction?: boolean, propAttrs?: string[], staticAction?: boolean }} shape
- * @returns {void}
+ * @param {{ staticAction?: boolean, duplicateAction?: boolean, propAttrs?: string[] }} shape
  */
 export function assertConvergentBoundForm(shape) {
   if (shape.duplicateAction) {
     throw new Error(
-      '[webjs] a <form> carries two action=${...} holes. Only one can win, and '
-      + 'the two renderers pick differently, so bind exactly one action.',
+      '[webjs] two action=${...} holes were found on one <form>. A form can carry '
+      + 'only one action binding. Move one to a submit button\'s formaction=${action} '
+      + 'or remove the duplicate.',
     );
   }
   if (shape.staticAction) {
@@ -378,26 +366,12 @@ export function assertConvergentBoundForm(shape) {
 }
 
 /**
- * The sentinel for "this attribute is not present at all", as distinct from
- * present-and-empty. The difference decides the outcome: an ABSENT `method` is
- * supplied by the framework, while `method=""` is a value the author's template
- * produced and cannot submit, so it is refused.
+ * The sentinel for "this attribute is not present at all".
  */
 export const ABSENT = Symbol('webjs.attr.absent');
 
 /**
- * THE decision both renderers make about a bound form, in one place.
- *
- * Sharing it is the point. SSR reaches it with the attributes parsed off the
- * start tag it just emitted; the client reaches it with the values its template
- * would have emitted, reconstructed per part kind. Because the inputs mean the
- * same thing and the predicate is literally the same function, a shape the two
- * renderers could disagree about has to be a difference in how the inputs were
- * gathered, which is a much smaller surface than two independent guards.
- *
- * Returns what to INJECT for each attribute, or null to leave the author's own
- * value alone. Throws when a value cannot submit at all.
- *
+ * Resolve what to inject for method/enctype.
  * @param {string | typeof ABSENT | null} method
  * @param {string | typeof ABSENT | null} enctype
  * @returns {{ method: string | null, enctype: string | null }}
@@ -426,52 +400,22 @@ export function formActionHiddenField(id) {
 
 /**
  * Converge a live `<form>` on what SSR would have emitted for it (#1155).
- *
- * This runs at the END of a commit pass, unconditionally, for every candidate
- * the template recorded. Both of those matter:
- *
- * END of the pass, because whether a form can submit is a fact about the whole
- * start tag, and an attribute written after the action hole has not been
- * committed when that hole commits.
- *
- * UNCONDITIONALLY, because `updateInstance` re-applies only the parts whose own
- * value changed, so anything hanging off the action hole never runs when a
- * SIBLING hole is what moved.
- *
- * The `method` / `enctype` decision is made from the TEMPLATE (the recorded
- * statics plus this pass's values, resolved per part kind), never by reading
- * them back off the DOM. Reading the DOM cannot work: `?method=${false}` and
- * `method=${null}` both leave no attribute, and SSR resolves them to opposite
- * answers (it emits nothing for the first and `method=""` for the second). The
- * template is the only place that distinction survives.
- *
- * A consequence worth stating, because it looks like a hole and is not: a write
- * from OUTSIDE the template (a `ref` callback, `firstUpdated`, author code, an
- * extension) is deliberately not seen here. SSR cannot see such a write either,
- * so ignoring it is what keeps the two renderers in agreement; catching it
- * would make the client refuse state the server never had.
- *
  * @param {HTMLFormElement} form
- * @param {unknown} value        the action hole's resolved value
- * @param {string | typeof ABSENT} method   what SSR would have emitted
- * @param {string | typeof ABSENT} enctype  what SSR would have emitted
- * @param {{ duplicateAction: boolean, propAttrs: string[] }} shape compile-time refusals
+ * @param {unknown} value
+ * @param {string | typeof ABSENT} method
+ * @param {string | typeof ABSENT} enctype
+ * @param {{ duplicateAction: boolean, propAttrs: string[] }} shape
  * @returns {void}
  */
 export function reconcileFormAction(form, value, method, enctype, shape) {
   const id = typeof value === 'function' ? formActionId(value) : null;
 
   if (!id) {
-    // Not a bound action (a url string, null, or a function the browser stub
-    // never stamped). A function that was MEANT as an action still refuses, so
-    // a form never silently posts nowhere.
     if (typeof value === 'function') assertIdentifiableAction(null, form.localName);
     releaseFormAction(form, method, enctype, shape.propAttrs);
     return;
   }
 
-  // Shapes SSR and the client can never agree on, refused rather than
-  // reconciled, through the same helper SSR calls.
   assertConvergentBoundForm(shape);
 
   const resolved = resolveBoundFormAttrs(method, enctype);
@@ -483,12 +427,6 @@ export function reconcileFormAction(form, value, method, enctype, shape) {
 
 /**
  * Write (or leave) one resolved attribute.
- *
- * `inject` non-null means the template supplies nothing and the framework owns
- * this attribute, so it is set. Otherwise the author's own value is already on
- * the element, put there by whichever commit branch owns that hole, and is left
- * exactly as written.
- *
  * @param {Element} form
  * @param {string} name
  * @param {string | typeof ABSENT} authored
@@ -496,9 +434,6 @@ export function reconcileFormAction(form, value, method, enctype, shape) {
  */
 function applyResolvedAttr(form, name, authored, inject) {
   if (inject !== null) { form.setAttribute(name, inject); return; }
-  // The author's value is authoritative. It is already committed, except for a
-  // hole whose value is empty, which some branches express by removing the
-  // attribute; put it back so the DOM matches what SSR emitted.
   if (authored !== ABSENT && form.getAttribute(name) !== authored) {
     form.setAttribute(name, /** @type string */ (authored));
   }
@@ -506,81 +441,45 @@ function applyResolvedAttr(form, name, authored, inject) {
 
 /**
  * Ensure the hidden identity field is present, first, and current.
- *
- * FIRST is load-bearing: it puts the field outside every child part's marker
- * range, so a later child update cannot take it out. `firstElementChild` is the
- * fast path because both this function and SSR put it there, and the scan is
- * only a fallback for a form whose children were moved by hand.
- *
  * @param {HTMLFormElement} form
  * @param {string} id
  */
 function ensureIdentityField(form, id) {
   const first = form.firstElementChild;
   let field = first && first.localName === 'input'
-    && first.getAttribute('name') === FORM_ACTION_FIELD ? first : null;
+    && first.getAttribute('name') === FORM_ACTION_FIELD
+    ? /** @type {HTMLInputElement} */ (first)
+    : null;
   if (!field) {
-    for (const el of form.children) {
-      if (el.localName === 'input' && el.getAttribute('name') === FORM_ACTION_FIELD) {
-        field = el;
+    for (const child of form.children) {
+      if (child.localName === 'input' && child.getAttribute('name') === FORM_ACTION_FIELD) {
+        field = /** @type {HTMLInputElement} */ (child);
         break;
       }
     }
   }
   if (!field) {
-    field = form.ownerDocument.createElement('input');
-    field.setAttribute('type', 'hidden');
-    field.setAttribute('name', FORM_ACTION_FIELD);
+    field = document.createElement('input');
+    field.type = 'hidden';
+    field.name = FORM_ACTION_FIELD;
     form.insertBefore(field, form.firstChild);
   }
-  if (field.getAttribute('value') !== id) field.setAttribute('value', id);
+  field.value = id;
 }
 
 /**
- * Drop a binding whose action hole no longer resolves to an action.
- *
- * Both halves matter. The identity field has to go, or the form keeps posting
- * the old action's identity to whatever it now targets. And the attributes the
- * framework supplied have to go with it, or a released form keeps a
- * `method="post" enctype="multipart/form-data"` that SSR does not emit for the
- * same template.
- *
- * Which attributes were framework-supplied is not remembered from the bind, it
- * is recomputed: an attribute is the framework's exactly when the template
- * supplies nothing for it on THIS pass. That is why there is no bookkeeping to
- * go stale.
- *
- * A `.method` / `.enctype` / `.encoding` PROPERTY binding is the exception, and
- * it has to be named rather than inferred. Its write reflects to the content
- * attribute, but it is not an attribute part, so "the template supplies nothing
- * for it" reads true and the removal below would wipe the author's own value on
- * every re-render. The property spelling is refused on a BOUND form, so this is
- * the only path that can meet one.
- *
- * Keeping it does leave the client and SSR holding different attributes for an
- * UNBOUND `<form action=${url} .method=${'post'}>`: SSR drops `.prop` bindings
- * on native elements, so it emits no `method`, while the browser reflects one.
- * That is the ordinary native-property rule applying to an ordinary form, not a
- * form-action divergence, and it is what the same template does with no action
- * hole at all. Removing the attribute would "fix" the mismatch only by
- * destroying the author's binding, which is a worse answer than agreeing with
- * every other native property on the page.
- *
+ * Release a form that was candidate-bound when its value turns out NOT to be an
+ * action function.
  * @param {HTMLFormElement} form
  * @param {string | typeof ABSENT} method
  * @param {string | typeof ABSENT} enctype
- * @param {string[] | undefined} propAttrs attribute names a property part owns
+ * @param {string[]} [propAttrs]
  */
 function releaseFormAction(form, method, enctype, propAttrs) {
-  const first = form.firstElementChild;
-  if (first && first.localName === 'input' && first.getAttribute('name') === FORM_ACTION_FIELD) {
-    first.remove();
-  } else {
-    for (const el of form.children) {
-      if (el.localName === 'input' && el.getAttribute('name') === FORM_ACTION_FIELD) {
-        el.remove();
-        break;
-      }
+  for (const child of Array.from(form.children)) {
+    if (child.localName === 'input' && child.getAttribute('name') === FORM_ACTION_FIELD) {
+      child.remove();
+      break;
     }
   }
   const owned = (name) => (propAttrs || []).some((p) => {
@@ -592,23 +491,13 @@ function releaseFormAction(form, method, enctype, propAttrs) {
 }
 
 /**
- * Parse the attributes of an emitted start tag into `name -> value`, where a
- * valueless attribute maps to the empty string.
- *
- * A real tokenizer rather than a regex over the whole tag, because the tag is
- * emitted HTML and an attribute VALUE can contain anything: `<form
- * data-note="use method=get here" action=${fn}>` has to report no `method`
- * attribute, and a regex looking for `method=` reports one. Getting that wrong
- * means silently skipping the forced `method="post"` and shipping a form that
- * submits nothing.
- *
+ * Parse start tag attributes into a map.
  * @param {string} startTag
  * @returns {Map<string, string>}
  */
 export function parseStartTagAttrs(startTag) {
   /** @type {Map<string, string>} */
   const attrs = new Map();
-  // Skip `<` and the tag name.
   let i = 1;
   while (i < startTag.length && !/[\s/>]/.test(startTag[i])) i++;
   while (i < startTag.length) {
@@ -621,14 +510,14 @@ export function parseStartTagAttrs(startTag) {
       if (name) attrs.set(name.toLowerCase(), '');
       continue;
     }
-    i++; // the `=`
+    i++;
     while (i < startTag.length && /\s/.test(startTag[i])) i++;
     let value = '';
     const q = startTag[i];
     if (q === '"' || q === "'") {
       i++;
       while (i < startTag.length && startTag[i] !== q) value += startTag[i++];
-      i++; // closing quote
+      i++;
     } else {
       while (i < startTag.length && !/[\s>]/.test(startTag[i])) value += startTag[i++];
     }
@@ -654,24 +543,6 @@ function reflectsAsFormAction(propName, tag) {
 
 /**
  * Does stringifying this value expose a function's source?
- *
- * The commit sites do `String(val)`, and `Array.prototype.toString` stringifies
- * each element through `String()` too, so `action=${[serverAction]}` leaks
- * exactly as `action=${serverAction}` does. Recursive because nested arrays
- * join the same way.
- *
- * Tracks visited arrays because `Array.prototype.join` has a cycle guard and
- * this has to match it. A self-referential array stringifies to `''` rather
- * than recursing forever, so a naive walk would turn a render that used to
- * succeed into a stack overflow. Refusing to leak must not become a new way
- * to crash.
- *
- * Deliberately NOT a check on the stringified result: sniffing the output for
- * something function-shaped would misfire on a legitimate URL, and the value's
- * shape is the thing actually being claimed. An object with a hand-written
- * `toString` that returns a function's source is out of scope; that is
- * deliberate exfiltration, not the accident this guards.
- *
  * @param {unknown} val
  * @param {Set<unknown>} [seen]
  * @returns {boolean}
@@ -687,14 +558,6 @@ function carriesFunction(val, seen) {
 
 /**
  * Is this the name of a form-action attribute?
- *
- * Strips a leading binding sigil before comparing. The SSR state machines
- * accumulate the AUTHORED name, and only the unquoted `after-eq` branch splits
- * the prefix off, so a quoted hole arrives here as `.action` / `?action` /
- * `@action` with the sigil still attached. Comparing the raw name let every one
- * of those through, which is the same leak wearing a different hat: the
- * renderer treats a quoted binding hole as a plain attribute and stringifies it.
- *
  * @param {string} attrName
  * @returns {boolean}
  */
@@ -705,10 +568,7 @@ function isFormActionAttr(attrName) {
 }
 
 /**
- * The refusal message. Deliberately never echoes the function's source, which
- * is the very thing being withheld. It names the one supported shape, because
- * every refused shape here is a near-miss of it and the author's next question
- * is what to write instead.
+ * The refusal message.
  * @param {string} attrName
  * @param {string} [tag]
  */
@@ -717,5 +577,6 @@ function formActionError(attrName, tag) {
     + `on <${tag || 'form'}>. Stringifying a function into HTML would leak its `
     + `source (a 'use server' action's body included) to every visitor, so this `
     + `is refused. To run a server action from a form, write an unquoted `
-    + `action=\${action} on the <form> itself. Anywhere else, pass a URL string.`;
+    + `action=\${action} on the <form> itself or a formaction=\${action} on a `
+    + `<button> inside a bound form. Anywhere else, pass a URL string.`;
 }
diff --git a/packages/core/src/render-client.js b/packages/core/src/render-client.js
index 0f24b6115..4faddb426 100644
--- a/packages/core/src/render-client.js
+++ b/packages/core/src/render-client.js
@@ -3,7 +3,9 @@ import { BINDING_PREFIXES, isBindingPrefix } from './binding-prefixes.js';
 import { escapeAttr } from './escape.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
-  reconcileFormAction, isBoundFormAction, ABSENT,
+  reconcileFormAction, isBoundFormAction, ABSENT, assertSubmitterHasNoName,
+  assertSubmitterNotImage, assertSubmitterFormIsBound, formActionId,
+  assertIdentifiableAction, FORM_ACTION_FIELD, PARSEABLE_ENCTYPES,
 } from './form-action.js';
 import { isRepeat } from './repeat.js';
 import { isUnsafeHTML, isLive, isKeyed, isGuard, isTemplateContent, isRef, isCache, isUntil, isAsyncAppend, isAsyncReplace, isWatch } from './directives.js';
@@ -530,7 +532,7 @@ function assignPaths(root, parts) {
         // point in compilation with that whole view, and it runs once per
         // template, so the record is a constant rather than runtime memory that
         // can drift out of step with the DOM.
-        if (el.localName === 'form') {
+        if (el.localName === 'form' || el.localName === 'button' || el.localName === 'input') {
           const rec = buildFormActionRecord(el, onEl, parts);
           if (rec) formActions.push(rec);
         }
@@ -545,19 +547,7 @@ function assignPaths(root, parts) {
 }
 
 /**
- * Build the compile-time record for one `<form>` that carries an `action` hole.
- *
- * A CANDIDATE, not a decision: `<form action=${maybeString}>` compiles exactly
- * like a bound one, so whether the form is really bound is a runtime fact the
- * reconcile decides from the value. Everything recorded here is a property of
- * the TEMPLATE, which is why it cannot go stale the way remembering "did the
- * bind supply this attribute" at runtime did.
- *
- * `encoding` folds into `enctype` for a PROPERTY binding only: it is a legacy
- * IDL alias, so `.encoding=` writes the enctype content attribute. As a content
- * attribute `encoding=` is inert (a browser's `form.encoding` reads back
- * `enctype`), and SSR ignores it, so folding the attribute spelling too would
- * make the client honour a value the server never saw.
+ * Build the compile-time record for one `<form>` or submitter that carries an `action` / `formaction` hole.
  *
  * @param {Element} el
  * @param {{ idx: number, kind: string, name: string }[]} onEl parts bound to `el`
@@ -565,7 +555,9 @@ function assignPaths(root, parts) {
  * @returns {FormActionRecord | null}
  */
 function buildFormActionRecord(el, onEl, parts) {
-  const actionParts = onEl.filter((p) => p.kind === 'attr' && p.name.toLowerCase() === 'action');
+  const isForm = el.localName === 'form';
+  const targetAttr = isForm ? 'action' : 'formaction';
+  const actionParts = onEl.filter((p) => p.kind === 'attr' && p.name.toLowerCase() === targetAttr);
   if (!actionParts.length) return null;
 
   /** @type {FormAttrPart[]} */
@@ -574,6 +566,7 @@ function buildFormActionRecord(el, onEl, parts) {
   const enctypeParts = [];
   /** Prop bindings that cannot converge with SSR; refused when actually bound. */
   const propAttrs = [];
+  const hasNamePart = onEl.some((p) => p.name.toLowerCase() === 'name');
 
   for (const p of onEl) {
     const name = String(p.name).toLowerCase();
@@ -586,25 +579,18 @@ function buildFormActionRecord(el, onEl, parts) {
     const d = /** @type any */ (parts[p.idx]);
     /** @type {FormAttrPart} */
     const entry = { i: p.idx, kind: p.kind };
-    // A mixed attribute's value is `statics[0] + v0 + statics[1] + ...`, so the
-    // pieces have to travel with the record; reading the anchor's value alone
-    // is right only when the statics are empty.
     if (p.kind === 'attr-mixed') { entry.statics = d.statics || []; entry.group = d.group || []; }
     (name === 'method' ? methodParts : enctypeParts).push(entry);
   }
 
   return {
-    // EVERY action hole, not just the first. SSR refuses two holes whenever
-    // ANY of them resolves to a bound action, so recording only the first would
-    // let `<form action=${'/legacy'} action=${boundFn}>` slip through the
-    // client's release path while SSR throws on the same template.
+    isForm,
+    tag: el.localName,
     actionIdxs: actionParts.map((p) => p.idx),
     duplicateAction: actionParts.length > 1,
-    // A static `action="..."` surviving alongside the hole. The compiled
-    // template holds the hole as a sentinel attribute, so anything read back
-    // under the real name here is the author's own second one.
-    staticAction: el.getAttribute('action') != null,
+    staticAction: el.getAttribute(targetAttr) != null,
     propAttrs,
+    hasNamePart,
     staticMethod: el.getAttribute('method'),
     staticEnctype: el.getAttribute('enctype'),
     methodParts,
@@ -612,6 +598,82 @@ function buildFormActionRecord(el, onEl, parts) {
   };
 }
 
+/**
+ * Reconcile form and submitter action bindings.
+ * @param {FormActionRecord[] | null} formActions
+ * @param {BoundPart[]} bound
+ * @param {unknown[]} values
+ */
+function reconcileFormActions(formActions, bound, values) {
+  if (!formActions) return;
+  for (const rec of formActions) {
+    let idx = rec.actionIdxs[0];
+    const targetAttr = rec.isForm ? 'action' : 'formaction';
+    for (const i of rec.actionIdxs) {
+      if (isBoundFormAction(resolveHoleValue(values[i]), targetAttr, rec.tag)) { idx = i; break; }
+    }
+    const part = bound[idx];
+    if (!part || !part.el) continue;
+    const val = resolveHoleValue(values[idx]);
+    if (rec.isForm) {
+      reconcileFormAction(
+        /** @type any */ (part.el),
+        val,
+        effectiveFormAttr(rec.methodParts, rec.staticMethod, values),
+        effectiveFormAttr(rec.enctypeParts, rec.staticEnctype, values),
+        rec,
+      );
+    } else {
+      reconcileSubmitterAction(
+        /** @type any */ (part.el),
+        val,
+        rec,
+      );
+    }
+  }
+}
+
+/**
+ * Reconcile a submitter button (`<button formaction=${action}>`).
+ * @param {Element} el
+ * @param {unknown} value
+ * @param {FormActionRecord} rec
+ */
+function reconcileSubmitterAction(el, value, rec) {
+  const id = typeof value === 'function' ? formActionId(value) : null;
+  if (!id) {
+    if (typeof value === 'function') assertIdentifiableAction(null, el.localName);
+    return;
+  }
+  const form = el.closest('form');
+  const isFormBound = !!(form && (form.querySelector(`input[name="${FORM_ACTION_FIELD}"]`) || form.hasAttribute('data-webjs-bound')));
+  assertSubmitterFormIsBound(isFormBound, el.localName);
+  if (el.hasAttribute('name') || rec.hasNamePart) {
+    assertSubmitterHasNoName(el.getAttribute('name') || '', el.localName);
+  }
+  if (el.localName === 'input' && el.getAttribute('type') === 'image') {
+    assertSubmitterNotImage(el.localName);
+  }
+  const formEnctype = el.getAttribute('formenctype');
+  if (formEnctype != null && !PARSEABLE_ENCTYPES.has(formEnctype.toLowerCase())) {
+    throw new Error(
+      `[webjs] formaction=\${action} on <${el.localName}> with formenctype="${formEnctype}" `
+      + `cannot work: form submission is parsed as multipart/form-data or `
+      + `application/x-www-form-urlencoded.`,
+    );
+  }
+  const formMethod = el.getAttribute('formmethod');
+  if (formMethod != null && /^get$/i.test(formMethod)) {
+    throw new Error(
+      `[webjs] formaction=\${action} on <${el.localName}> with formmethod="${formMethod}" `
+      + `cannot work: a bound server action is submitted as a POST body.`,
+    );
+  }
+  el.removeAttribute('formaction');
+  el.setAttribute('name', FORM_ACTION_FIELD);
+  el.setAttribute('value', id);
+};
+
 /* ================================================================
  * Instance lifecycle
  * ================================================================ */
@@ -818,37 +880,7 @@ function resolveHoleValue(v) {
   return isLive(v) ? /** @type any */ (v).value : v;
 }
 
-/**
- * Converge every candidate bound form in this template, after all of its parts
- * have committed. A no-op for the overwhelming majority of templates, which
- * carry no `<form action=${...}>` at all and therefore no record.
- *
- * @param {FormActionRecord[] | null} formActions
- * @param {BoundPart[]} bound
- * @param {unknown[]} values
- */
-function reconcileFormActions(formActions, bound, values) {
-  if (!formActions) return;
-  for (const rec of formActions) {
-    // With more than one action hole, the BOUND one decides, whichever position
-    // it is written in. Picking `actionIdxs[0]` blindly would send
-    // `<form action=${'/url'} action=${boundFn}>` down the release path and
-    // ship the broken form SSR refuses outright.
-    let idx = rec.actionIdxs[0];
-    for (const i of rec.actionIdxs) {
-      if (isBoundFormAction(resolveHoleValue(values[i]), 'action', 'form')) { idx = i; break; }
-    }
-    const part = bound[idx];
-    if (!part || !part.el) continue;
-    reconcileFormAction(
-      /** @type any */ (part.el),
-      resolveHoleValue(values[idx]),
-      effectiveFormAttr(rec.methodParts, rec.staticMethod, values),
-      effectiveFormAttr(rec.enctypeParts, rec.staticEnctype, values),
-      rec,
-    );
-  }
-}
+
 
 /**
  * @param {BoundPart} part
diff --git a/packages/core/src/render-server.js b/packages/core/src/render-server.js
index 0de43473b..0d193d850 100644
--- a/packages/core/src/render-server.js
+++ b/packages/core/src/render-server.js
@@ -4,7 +4,8 @@ import { escapeText, escapeAttr } from './escape.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
   assertIdentifiableAction, bindFormActionStartTag, isBoundFormAction, resolveFormActionId,
-  assertConvergentBoundForm,
+  assertConvergentBoundForm, assertSubmitterHasNoName, assertSubmitterNotImage,
+  assertSubmitterFormIsBound, parseStartTagAttrs, FORM_ACTION_FIELD, PARSEABLE_ENCTYPES,
 } from './form-action.js';
 import { lookup, lookupModuleUrl, allTags } from './registry.js';
 import { stylesToString, isCSS } from './css.js';
@@ -156,34 +157,56 @@ async function renderTemplate(tr, ctx) {
   let commentDashes = 0;
   let currentTag = '';   // lowercased tag name currently being parsed
   let rawTail = '';      // rolling lowercased tail, tracks </script>/</style>
-  let tagStart = -1;     // index in `out` of the `<` opening the current tag
   /** @type {string | null} */
-  let pendingActionId = null;  // identity of a bound form action, until the tag closes
-  // Shapes on the CURRENT start tag that a bound form may not carry (#1155).
-  // Collected as the tag is scanned and judged at its `>`, because the action
-  // hole may come after them.
+  let pendingActionId = null;
+  /** @type {string | null} */
+  let pendingSubmitterTag = null;
+  let tagStart = 0;
   let pendingActionCount = 0;
   /** @type {string[]} */
   let pendingPropAttrs = [];
+  let insideBoundForm = false;
+  let isCloseTag = false;
 
-  // A bound `action=${fn}` is committed at its hole, but the edits it implies
-  // (forcing `method` / `enctype`, and the hidden identity field) are only
-  // possible once the whole start tag is known: an attribute the author wrote
-  // AFTER the action hole still counts, and the hidden field belongs INSIDE
-  // the form, after the `>`. So the hole records the identity and this runs at
-  // the `>`, rewriting the start tag that was just emitted.
   const closeBoundFormTag = () => {
-    // Reset per tag whether or not this one was bound, so a later form is never
-    // judged on an earlier tag's shapes.
     const propAttrs = pendingPropAttrs;
     const duplicateAction = pendingActionCount > 1;
     pendingPropAttrs = [];
     pendingActionCount = 0;
-    if (pendingActionId == null) return;
-    assertConvergentBoundForm({ duplicateAction, propAttrs });
-    const bound = bindFormActionStartTag(out.slice(tagStart), pendingActionId);
-    out = out.slice(0, tagStart) + bound.tag + bound.hidden;
-    pendingActionId = null;
+    if (pendingActionId != null) {
+      assertConvergentBoundForm({ duplicateAction, propAttrs });
+      const bound = bindFormActionStartTag(out.slice(tagStart), pendingActionId);
+      out = out.slice(0, tagStart) + bound.tag + bound.hidden;
+      pendingActionId = null;
+      insideBoundForm = true;
+    }
+    if (pendingSubmitterTag != null) {
+      const tag = pendingSubmitterTag;
+      pendingSubmitterTag = null;
+      const tagStr = out.slice(tagStart);
+      const attrs = parseStartTagAttrs(tagStr);
+      if (attrs.has('name')) {
+        assertSubmitterHasNoName(attrs.get('name') || '', tag);
+      }
+      if (tag === 'input' && attrs.get('type') === 'image') {
+        assertSubmitterNotImage(tag);
+      }
+      const formEnctype = attrs.get('formenctype');
+      if (formEnctype != null && !PARSEABLE_ENCTYPES.has(formEnctype.toLowerCase())) {
+        throw new Error(
+          `[webjs] formaction=\${action} on <${tag}> with formenctype="${formEnctype}" `
+          + `cannot work: form submission is parsed as multipart/form-data or `
+          + `application/x-www-form-urlencoded.`,
+        );
+      }
+      const formMethod = attrs.get('formmethod');
+      if (formMethod != null && /^get$/i.test(formMethod)) {
+        throw new Error(
+          `[webjs] formaction=\${action} on <${tag}> with formmethod="${formMethod}" `
+          + `cannot work: a bound server action is submitted as a POST body.`,
+        );
+      }
+    }
   };
   // #1155: a `.method` / `.enctype` / `.encoding` prop on a form is dropped
   // here but applied for real in the browser, where all three are reflected IDL
@@ -202,6 +225,16 @@ async function renderTemplate(tr, ctx) {
     }
   };
 
+  const handleTagEnd = () => {
+    closeBoundFormTag();
+    if (isCloseTag && currentTag === 'form') {
+      insideBoundForm = false;
+    }
+    isCloseTag = false;
+    state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
+    if (state === 'rawtext') rawTail = '';
+  };
+
   for (let i = 0; i < strings.length; i++) {
     const s = strings[i];
     for (let j = 0; j < s.length; j++) {
@@ -209,12 +242,12 @@ async function renderTemplate(tr, ctx) {
       switch (state) {
         case 'text':
           out += c;
-          if (c === '<') { state = 'tag-open'; tagStart = out.length - 1; }
+          if (c === '<') { state = 'tag-open'; tagStart = out.length - 1; isCloseTag = false; }
           break;
         case 'tag-open':
           out += c;
           if (c === '!') state = 'bang-1';
-          else if (c === '/') { state = 'tag-name'; currentTag = ''; }
+          else if (c === '/') { state = 'tag-name'; currentTag = ''; isCloseTag = true; }
           else if (/[a-zA-Z]/.test(c)) { state = 'tag-name'; currentTag = c.toLowerCase(); }
           else state = 'text';
           break;
@@ -236,18 +269,14 @@ async function renderTemplate(tr, ctx) {
         case 'tag-name':
           out += c;
           if (c === '>') {
-            closeBoundFormTag();
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd();
           } else if (/\s/.test(c)) state = 'in-tag';
           else currentTag += c.toLowerCase();
           break;
         case 'in-tag':
           out += c;
           if (c === '>') {
-            closeBoundFormTag();
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd();
           } else if (!/\s/.test(c) && c !== '/') {
             state = 'attr-name';
             attrName = c;
@@ -266,18 +295,18 @@ async function renderTemplate(tr, ctx) {
         case 'attr-name':
           if (c === '=') { state = 'after-eq'; out += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; closeBoundFormTag(); }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(); }
           else { attrName += c; out += c; }
           break;
         case 'after-eq':
           if (c === '"' || c === "'") { state = 'attr-quoted'; attrQuote = c; out += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; closeBoundFormTag(); }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(); }
           else { state = 'attr-unquoted'; out += c; }
           break;
         case 'attr-unquoted':
           if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; out += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; out += c; closeBoundFormTag(); }
+          else if (c === '>') { state = 'text'; attrName = ''; out += c; handleTagEnd(); }
           else out += c;
           break;
         case 'attr-quoted':
@@ -289,19 +318,13 @@ async function renderTemplate(tr, ctx) {
 
     if (i < values.length) {
       let val = values[i];
-      // Resolve promises anywhere in the value graph.
       if (val && typeof /** @type any */ (val).then === 'function') {
         val = await val;
       }
       if (state === 'comment') {
-        // Holes inside <!-- comments --> are emitted raw (no escaping; comments
-        // are inert and not rendered by browsers).
         out += String(val ?? '');
         commentDashes = 0;
       } else if (state === 'rawtext') {
-        // Inside <script> / <style>: emit the value as-is (no HTML escaping).
-        // Author is responsible for not closing the tag with user-controlled
-        // data: the usual caveat for CSS/JS interpolation.
         out += String(val ?? '');
         rawTail = '';
       } else if (state === 'text') {
@@ -311,28 +334,11 @@ async function renderTemplate(tr, ctx) {
         const name = attrName.slice(1);
         const kind = BINDING_PREFIXES[prefix];
         if (kind === 'event') {
-          // Event listener. Client-only behaviour, drop at SSR.
           out = out.slice(0, attrStart);
           state = 'in-tag';
           attrName = '';
         } else if (kind === 'prop') {
-          // Property binding. Only meaningful on custom elements (which
-          // have a hyphen in the tag name and a WebComponent subclass
-          // that knows how to apply + strip data-webjs-prop-* on
-          // hydration). For native elements (`<input .value=${v}>`)
-          // the attribute would be dead weight (nothing consumes it),
-          // so we drop it the same way the old behaviour did. The
-          // client renderer still applies the property when the
-          // template runs in the browser, which is the only place a
-          // page-level `.prop` on a native element could have set the
-          // property to begin with.
           out = out.slice(0, attrStart);
-          // `<webjs-suspense .fallback=${html`...`}>` (#471). A TemplateResult
-          // is not serializer-safe (the normal data-webjs-prop-* path would
-          // drop it) and a normal custom-element prop applies only at
-          // hydration, too late for the streaming placeholder. So render the
-          // fallback to HTML now and carry it as data-webjs-fallback, which the
-          // injectDSD streaming pre-pass reads as the boundary placeholder.
           if (currentTag === 'webjs-suspense' && name === 'fallback') {
             const fbHtml = await render(val, ctx);
             out += `data-webjs-fallback="${escapeAttr(fbHtml)}"`;
@@ -341,26 +347,12 @@ async function renderTemplate(tr, ctx) {
             continue;
           }
           if (!currentTag.includes('-')) {
-            // A native element's `.prop` is dropped at SSR, so this path never
-            // leaked here. It still refuses a function where the property is a
-            // REFLECTED IDL attribute (`.action` on a form, `.formAction` on a
-            // button or input), so the rule does not depend on which renderer
-            // sees it first: the client sets that property for real and the
-            // reflection writes the source into the DOM. A page that renders
-            // clean on the server and throws on hydration is a worse failure
-            // than one that refuses at the earliest point. Elsewhere the
-            // property is a plain expando that reflects nothing, so refusing
-            // it would be a false positive.
             assertNotFunctionReflectedActionProp(val, name, currentTag);
             notePropAttr(name, currentTag);
             state = 'in-tag';
             attrName = '';
             continue;
           }
-          // `undefined` has no meaningful HTML representation. Drop
-          // silently so the consumer falls back to its constructor
-          // default. `null` is preserved because it's a real value
-          // distinct from "not set".
           if (val === undefined) {
             state = 'in-tag';
             attrName = '';
@@ -370,9 +362,6 @@ async function renderTemplate(tr, ctx) {
             const encoded = await stringify(val);
             out += `data-webjs-prop-${kebabCase(name)}="${escapeAttr(encoded)}"`;
           } catch (e) {
-            // Unserializable value (function, class instance with
-            // private state, DOM node, etc.). Drop with a warning so
-            // SSR does not crash. Same constraint as Next.js RSC.
             console.warn(
               `[webjs] property binding .${name} has an unserializable `
               + `value during SSR. Dropping. The browser will see the `
@@ -382,9 +371,6 @@ async function renderTemplate(tr, ctx) {
           state = 'in-tag';
           attrName = '';
         } else if (kind === 'bool') {
-          // Never leaked (a boolean binding stringifies nothing), but
-          // `?action=${fn}` is meaningless in every case and refusing it keeps
-          // the rule true for every sigil rather than only the quoted ones.
           assertNotFunctionActionAttr(val, name, currentTag);
           out = out.slice(0, attrStart);
           if (val) out += `${name}=""`;
@@ -392,32 +378,33 @@ async function renderTemplate(tr, ctx) {
           attrName = '';
         } else if (isBoundFormAction(val, attrName, currentTag)) {
           noteActionHole(attrName, currentTag);
-          // #1155: the ONE supported form-action binding. Drop the `action=`
-          // attribute entirely so the form posts to the page's own url (an
-          // omitted attribute, not `action=""`, which the spec calls a
-          // conformance error), and remember the identity so the `>` can force
-          // the submission attributes and emit the hidden field.
-          pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
-          // Trailing whitespace goes with the attribute: every injected
-          // attribute carries its own leading space, so keeping the old one
-          // would double it in the emitted tag.
-          out = out.slice(0, attrStart).replace(/\s+$/, '');
+          if (currentTag === 'form') {
+            pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            out = out.slice(0, attrStart).replace(/\s+$/, '');
+          } else if (currentTag === 'button' || currentTag === 'input') {
+            assertSubmitterFormIsBound(insideBoundForm, currentTag);
+            const tagStr = out.slice(tagStart);
+            const attrs = parseStartTagAttrs(tagStr);
+            if (attrs.has('name')) {
+              assertSubmitterHasNoName(attrs.get('name') || '', currentTag);
+            }
+            if (currentTag === 'input' && attrs.get('type') === 'image') {
+              assertSubmitterNotImage(currentTag);
+            }
+            const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            pendingSubmitterTag = currentTag;
+            out = out.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
+          }
           state = 'in-tag';
           attrName = '';
         } else {
-          // A second `action` hole that resolved to a plain url still COUNTS,
-          // so the duplicate refusal fires whatever the values happen to be.
           noteActionHole(attrName, currentTag);
-          // #1154: never stringify a function into action=/formaction= (it
-          // would serialize a server action's source into the served HTML).
           assertNotFunctionActionAttr(val, attrName, currentTag);
           out += `"${escapeAttr(String(val ?? ''))}"`;
           state = 'in-tag';
           attrName = '';
         }
       } else if (state === 'attr-quoted' || state === 'attr-unquoted') {
-        // Same guard for a hole inside a quoted/unquoted value, the
-        // `action="${fn}"` and mixed `action="/x/${fn}"` shapes (#1154).
         assertNotFunctionActionAttr(val, attrName, currentTag);
         out += escapeAttr(String(val ?? ''));
       }
@@ -1868,22 +1855,50 @@ async function streamTemplate(tr, ctx, controller) {
   let pendingActionCount = 0;
   /** @type {string[]} */
   let pendingPropAttrs = [];
+  /** @type {string | null} */
+  let pendingSubmitterTag = null;
+  let insideBoundForm = false;
+  let isCloseTag = false;
 
-  // See the buffered machine for why this runs at the `>` rather than at the
-  // hole. `tagStart` indexes into `buf`, which is safe because `buf` is only
-  // flushed on a `text`-state hole and a start tag contains none.
   const closeBoundFormTag = () => {
-    // Reset per tag whether or not this one was bound, so a later form is never
-    // judged on an earlier tag's shapes.
     const propAttrs = pendingPropAttrs;
     const duplicateAction = pendingActionCount > 1;
     pendingPropAttrs = [];
     pendingActionCount = 0;
-    if (pendingActionId == null) return;
-    assertConvergentBoundForm({ duplicateAction, propAttrs });
-    const bound = bindFormActionStartTag(buf.slice(tagStart), pendingActionId);
-    buf = buf.slice(0, tagStart) + bound.tag + bound.hidden;
-    pendingActionId = null;
+    if (pendingActionId != null) {
+      assertConvergentBoundForm({ duplicateAction, propAttrs });
+      const bound = bindFormActionStartTag(buf.slice(tagStart), pendingActionId);
+      buf = buf.slice(0, tagStart) + bound.tag + bound.hidden;
+      pendingActionId = null;
+      insideBoundForm = true;
+    }
+    if (pendingSubmitterTag != null) {
+      const tag = pendingSubmitterTag;
+      pendingSubmitterTag = null;
+      const tagStr = buf.slice(tagStart);
+      const attrs = parseStartTagAttrs(tagStr);
+      if (attrs.has('name')) {
+        assertSubmitterHasNoName(attrs.get('name') || '', tag);
+      }
+      if (tag === 'input' && attrs.get('type') === 'image') {
+        assertSubmitterNotImage(tag);
+      }
+      const formEnctype = attrs.get('formenctype');
+      if (formEnctype != null && !PARSEABLE_ENCTYPES.has(formEnctype.toLowerCase())) {
+        throw new Error(
+          `[webjs] formaction=\${action} on <${tag}> with formenctype="${formEnctype}" `
+          + `cannot work: form submission is parsed as multipart/form-data or `
+          + `application/x-www-form-urlencoded.`,
+        );
+      }
+      const formMethod = attrs.get('formmethod');
+      if (formMethod != null && /^get$/i.test(formMethod)) {
+        throw new Error(
+          `[webjs] formaction=\${action} on <${tag}> with formmethod="${formMethod}" `
+          + `cannot work: a bound server action is submitted as a POST body.`,
+        );
+      }
+    }
   };
   // #1155: a `.method` / `.enctype` / `.encoding` prop on a form is dropped
   // here but applied for real in the browser, where all three are reflected IDL
@@ -1902,6 +1917,16 @@ async function streamTemplate(tr, ctx, controller) {
     }
   };
 
+  const handleTagEnd = () => {
+    closeBoundFormTag();
+    if (isCloseTag && currentTag === 'form') {
+      insideBoundForm = false;
+    }
+    isCloseTag = false;
+    state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
+    if (state === 'rawtext') rawTail = '';
+  };
+
   for (let i = 0; i < strings.length; i++) {
     const s = strings[i];
     for (let j = 0; j < s.length; j++) {
@@ -1909,12 +1934,12 @@ async function streamTemplate(tr, ctx, controller) {
       switch (state) {
         case 'text':
           buf += c;
-          if (c === '<') { state = 'tag-open'; tagStart = buf.length - 1; }
+          if (c === '<') { state = 'tag-open'; tagStart = buf.length - 1; isCloseTag = false; }
           break;
         case 'tag-open':
           buf += c;
           if (c === '!') state = 'bang-1';
-          else if (c === '/') { state = 'tag-name'; currentTag = ''; }
+          else if (c === '/') { state = 'tag-name'; currentTag = ''; isCloseTag = true; }
           else if (/[a-zA-Z]/.test(c)) { state = 'tag-name'; currentTag = c.toLowerCase(); }
           else state = 'text';
           break;
@@ -1936,18 +1961,14 @@ async function streamTemplate(tr, ctx, controller) {
         case 'tag-name':
           buf += c;
           if (c === '>') {
-            closeBoundFormTag();
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd();
           } else if (/\s/.test(c)) state = 'in-tag';
           else currentTag += c.toLowerCase();
           break;
         case 'in-tag':
           buf += c;
           if (c === '>') {
-            closeBoundFormTag();
-            state = isRawtextTag(currentTag) ? 'rawtext' : 'text';
-            if (state === 'rawtext') rawTail = '';
+            handleTagEnd();
           } else if (!/\s/.test(c) && c !== '/') {
             state = 'attr-name';
             attrName = c;
@@ -1966,18 +1987,18 @@ async function streamTemplate(tr, ctx, controller) {
         case 'attr-name':
           if (c === '=') { state = 'after-eq'; buf += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; closeBoundFormTag(); }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(); }
           else { attrName += c; buf += c; }
           break;
         case 'after-eq':
           if (c === '"' || c === "'") { state = 'attr-quoted'; attrQuote = c; buf += c; }
           else if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; closeBoundFormTag(); }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(); }
           else { state = 'attr-unquoted'; buf += c; }
           break;
         case 'attr-unquoted':
           if (/\s/.test(c)) { state = 'in-tag'; attrName = ''; buf += c; }
-          else if (c === '>') { state = 'text'; attrName = ''; buf += c; closeBoundFormTag(); }
+          else if (c === '>') { state = 'text'; attrName = ''; buf += c; handleTagEnd(); }
           else buf += c;
           break;
         case 'attr-quoted':
@@ -1987,9 +2008,6 @@ async function streamTemplate(tr, ctx, controller) {
       }
     }
 
-    // Flush the buffer before processing the value hole: but only when
-    // we're in text state (in attribute states we may need the buffer for
-    // backtracking).
     if (i < values.length) {
       let val = values[i];
       if (val && typeof /** @type any */ (val).then === 'function') {
@@ -2002,25 +2020,24 @@ async function streamTemplate(tr, ctx, controller) {
         buf += String(val ?? '');
         rawTail = '';
       } else if (state === 'text') {
-        // Flush the buffered static content before streaming the value.
-        if (buf) { controller.enqueue(buf); buf = ''; }
-        await streamRender(val, ctx, controller);
+        buf += await render(val, ctx);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
         const kind = BINDING_PREFIXES[prefix];
-        if (kind === 'event' || kind === 'prop') {
-          // Guard `prop` ONLY, matching the buffered machine. An `@action`
-          // event binding is dropped here and never stringified, and a
-          // function is the LEGITIMATE value for one (`<my-el @action=${fn}>`
-          // listens for an `action` event), so refusing it would be a false
-          // positive. `.action` differs where the property REFLECTS: on a form
-          // (and `.formAction` on a button or input) the client assignment
-          // writes the source into the DOM, so refusing at SSR keeps a page
-          // from rendering clean on the server and throwing on hydration.
-          // Elsewhere, including a custom element, the property reflects
-          // nothing and a function stays legal.
-          if (kind === 'prop' && !currentTag.includes('-')) {
+        if (kind === 'event') {
+          buf = buf.slice(0, attrStart);
+          state = 'in-tag';
+          attrName = '';
+        } else if (kind === 'prop') {
+          if (currentTag === 'webjs-suspense' && name === 'fallback') {
+            const fbHtml = await render(val, ctx);
+            buf += `data-webjs-fallback="${escapeAttr(fbHtml)}"`;
+            state = 'in-tag';
+            attrName = '';
+            continue;
+          }
+          if (!currentTag.includes('-')) {
             assertNotFunctionReflectedActionProp(val, name, currentTag);
             notePropAttr(name, currentTag);
           }
@@ -2028,10 +2045,6 @@ async function streamTemplate(tr, ctx, controller) {
           state = 'in-tag';
           attrName = '';
         } else if (kind === 'bool') {
-          // A boolean binding stringifies nothing, so this never leaked, but
-          // `?action=${fn}` is meaningless in every case (a truthy function
-          // emits a bare `action=""`), and refusing it keeps the rule the docs
-          // state true for every sigil rather than true only when quoted.
           assertNotFunctionActionAttr(val, name, currentTag);
           buf = buf.slice(0, attrStart);
           if (val) buf += `${name}=""`;
@@ -2039,20 +2052,27 @@ async function streamTemplate(tr, ctx, controller) {
           attrName = '';
         } else if (isBoundFormAction(val, attrName, currentTag)) {
           noteActionHole(attrName, currentTag);
-          // The SAME binding as the buffered renderer (#1155), in the second
-          // machine, so `renderToStream(v, { ssr: false })` emits an identical
-          // form rather than refusing one the page renderer accepts.
-          pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
-          buf = buf.slice(0, attrStart).replace(/\s+$/, '');
+          if (currentTag === 'form') {
+            pendingActionId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            buf = buf.slice(0, attrStart).replace(/\s+$/, '');
+          } else if (currentTag === 'button' || currentTag === 'input') {
+            assertSubmitterFormIsBound(insideBoundForm, currentTag);
+            const tagStr = buf.slice(tagStart);
+            const attrs = parseStartTagAttrs(tagStr);
+            if (attrs.has('name')) {
+              assertSubmitterHasNoName(attrs.get('name') || '', currentTag);
+            }
+            if (currentTag === 'input' && attrs.get('type') === 'image') {
+              assertSubmitterNotImage(currentTag);
+            }
+            const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
+            pendingSubmitterTag = currentTag;
+            buf = buf.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
+          }
           state = 'in-tag';
           attrName = '';
         } else {
           noteActionHole(attrName, currentTag);
-          // The SAME guard as the buffered renderer above. This is a second,
-          // independent state machine, so it inherits nothing from that one;
-          // a change to the rule has to land in both. Reached only via
-          // `renderToStream(v, { ssr: false })`, which no page render uses, so
-          // this covers the public API surface rather than a page leak.
           assertNotFunctionActionAttr(val, attrName, currentTag);
           buf += `"${escapeAttr(String(val ?? ''))}"`;
           state = 'in-tag';
diff --git a/packages/core/test/rendering/form-action-attr-guard-client.test.js b/packages/core/test/rendering/form-action-attr-guard-client.test.js
index 5425e1f51..50f0e201d 100644
--- a/packages/core/test/rendering/form-action-attr-guard-client.test.js
+++ b/packages/core/test/rendering/form-action-attr-guard-client.test.js
@@ -77,7 +77,7 @@ test('client render of camelCase formAction=${fn} throws', () => {
   const host = document.createElement('div');
   assert.throws(
     () => render(html`<button type="submit" formAction=${fakeAction}></button>`, host),
-    /function was interpolated into formaction=/,
+    /is not a server action|requires the enclosing <form>/,
   );
 });
 
diff --git a/packages/core/test/rendering/form-action-attr-guard.test.js b/packages/core/test/rendering/form-action-attr-guard.test.js
index f4bfa3e54..dc10c4662 100644
--- a/packages/core/test/rendering/form-action-attr-guard.test.js
+++ b/packages/core/test/rendering/form-action-attr-guard.test.js
@@ -151,26 +151,20 @@ test('mixed hole action="/x/${fn}" throws', async () => {
   );
 });
 
-test('formaction=${fn} on a submit button throws', async () => {
+test('formaction=${fn} on a submit button inside an unbound form throws', async () => {
   await assert.rejects(
     () => renderToString(html`<form method="post"><button formaction=${leaky}>Go</button></form>`, { ssr: true }),
-    /function was interpolated into formaction=/,
+    /requires the enclosing <form> to also be bound/,
   );
 });
 
-// Case normalization was the ONE branch of the guard with no test. Mutation
-// testing every branch against this suite, seven of eight mutants red it and
-// this was the survivor: dropping `.toLowerCase()` from isFormActionAttr kept
-// all 46 unit tests and the whole Bun table green while `<form ACTION=${fn}>`
-// and `<button formAction=${fn}>` rendered the source in full. Every shape
-// tested up to here spells the attribute lowercase, so nothing was pinning it.
-//
-// The uncovered spelling is not exotic: `formAction={serverAction}` is React's
-// canonical submit-button binding, so it is the Next muscle memory this guard
-// exists for, and it was the one spelling held up by an untested call.
-test('camelCase formAction=${fn} throws (React spells it this way)', async () => {
+test('camelCase formAction=${fn} throws on an unbound form (React spells it this way)', async () => {
   await assert.rejects(
     () => renderToString(html`<form method="post"><button formAction=${leaky}>Go</button></form>`, { ssr: true }),
+    /requires the enclosing <form> to also be bound/,
+  );
+  await assert.rejects(
+    () => renderToString(html`<form action=${'/x'}><button formAction="${leaky}">Go</button></form>`, { ssr: true }),
     /function was interpolated into formaction=/,
   );
 });
@@ -194,7 +188,7 @@ test('a quoted mixed-case Action="${fn}" throws (sigil strip and case-fold compo
 test('the streaming renderer folds case too', async () => {
   await assert.rejects(
     () => drain(renderToStream(html`<button formAction=${leaky}></button>`, { ssr: false })),
-    /function was interpolated into formaction=/,
+    /requires the enclosing <form> to also be bound/,
   );
 });
 
@@ -279,9 +273,13 @@ test('the streaming renderer refuses a mixed hole', async () => {
   );
 });
 
-test('the streaming renderer refuses formaction', async () => {
+test('the streaming renderer refuses formaction on an unbound button', async () => {
   await assert.rejects(
     () => drain(renderToStream(html`<button formaction=${leaky}></button>`, { ssr: false })),
+    /requires the enclosing <form> to also be bound/,
+  );
+  await assert.rejects(
+    () => drain(renderToStream(html`<form action=${'/x'}><button formaction="${leaky}"></button></form>`, { ssr: false })),
     /function was interpolated into formaction=/,
   );
 });
diff --git a/packages/core/test/rendering/form-action-binding-client.test.js b/packages/core/test/rendering/form-action-binding-client.test.js
index 4150b4cf2..f5b0d0c60 100644
--- a/packages/core/test/rendering/form-action-binding-client.test.js
+++ b/packages/core/test/rendering/form-action-binding-client.test.js
@@ -435,7 +435,7 @@ test('a failed render does not poison the NEXT one', () => {
   const h1 = document.createElement('div');
   assert.throws(
     () => render(html`<form method="get" action=${stub(ID)}></form><button formaction=${leaky}></button>`, h1),
-    /function was interpolated into/,
+    /cannot work|requires the enclosing <form>/,
   );
 
   const h2 = document.createElement('div');
diff --git a/packages/core/test/rendering/form-action-binding.test.js b/packages/core/test/rendering/form-action-binding.test.js
index 007fe17d1..dd15cb1c7 100644
--- a/packages/core/test/rendering/form-action-binding.test.js
+++ b/packages/core/test/rendering/form-action-binding.test.js
@@ -247,11 +247,10 @@ test('a refused tag does not poison the NEXT form in the same template', async (
   assert.match(out, new RegExp(`name="${FORM_ACTION_FIELD}"`), 'the second form still binds');
 });
 
-test('binding is scoped to <form>: the same function elsewhere still refuses', async () => {
+test('binding is scoped to <form> and bound submitters: non-action shapes refuse', async () => {
   withResolver();
   for (const tpl of [
     html`<div action=${submitFeedback}></div>`,
-    html`<button formaction=${submitFeedback}></button>`,
     html`<form action="${submitFeedback}"></form>`,
   ]) {
     let msg = '';
@@ -259,6 +258,19 @@ test('binding is scoped to <form>: the same function elsewhere still refuses', a
     assert.match(msg, /function was interpolated into/, 'refused as a stringify, not bound');
     assert.doesNotMatch(msg, /SECRET/);
   }
+  // Standalone submitter outside a bound form throws the form-binding requirement error:
+  let unboundMsg = '';
+  try { await renderToString(html`<button formaction=${submitFeedback}></button>`, { ssr: true }); } catch (e) { unboundMsg = String(e.message); }
+  assert.match(unboundMsg, /requires the enclosing <form> to also be bound/);
+});
+
+test('formaction=${fn} on submitter inside a bound form emits submitter action identity', async () => {
+  withResolver();
+  const out = await renderToString(
+    html`<form action=${submitFeedback}><button formaction=${submitFeedback}>Save</button></form>`,
+    { ssr: true }
+  );
+  assert.match(out, /<button name="__webjs_action" value="[0-9a-f]{10}\/submitFeedback">Save<\/button>/);
 });
 
 test('a bound form nested among siblings does not disturb them', async () => {
@@ -334,6 +346,33 @@ test('an encoding= CONTENT attribute is ignored, so enctype is still forced', as
   assert.match(out, /encoding="application\/x-www-form-urlencoded"/, 'the inert attribute is left alone');
 });
 
+test('formaction=${fn} submitter refusals: name attribute, input type=image, unparseable enctype, and method=get', async () => {
+  withResolver();
+  // 1. Submitter carrying its own name attribute:
+  await assert.rejects(
+    () => renderToString(html`<form action=${submitFeedback}><button name="intent" formaction=${submitFeedback}>Save</button></form>`, { ssr: true }),
+    /already carries a "name" attribute/,
+  );
+
+  // 2. <input type="image">:
+  await assert.rejects(
+    () => renderToString(html`<form action=${submitFeedback}><input type="image" formaction=${submitFeedback}></form>`, { ssr: true }),
+    /is not supported on <input type="image">/,
+  );
+
+  // 3. Submitter formenctype="text/plain":
+  await assert.rejects(
+    () => renderToString(html`<form action=${submitFeedback}><button formaction=${submitFeedback} formenctype="text/plain">Save</button></form>`, { ssr: true }),
+    /formenctype="text\/plain"/,
+  );
+
+  // 4. Submitter formmethod="get":
+  await assert.rejects(
+    () => renderToString(html`<form action=${submitFeedback}><button formaction=${submitFeedback} formmethod="get">Save</button></form>`, { ssr: true }),
+    /formmethod="get"/,
+  );
+});
+
 test('two action holes are refused whichever position the bound one is in', async () => {
   // The refusal is by HOLE COUNT once any hole resolves to an action, so a
   // template that writes the url first and the action second refuses too.
diff --git a/packages/server/src/check.js b/packages/server/src/check.js
index 02ae494cd..1cdf03e8b 100644
--- a/packages/server/src/check.js
+++ b/packages/server/src/check.js
@@ -1409,8 +1409,8 @@ export async function checkConventions(appDir) {
           if (tagAt < 0) continue;
           const tag = before.slice(tagAt);
           if (tag.includes('>')) continue;
-          if (!/^<form\b/i.test(tag)) continue;
-          if (!/\saction=$/i.test(tag)) continue;
+          if (!/^<(?:form|button|input)\b/i.test(tag)) continue;
+          if (!/\s(?:action|formaction)=$/i.test(tag)) continue;
           bound.add(m[2]);
         }
         if (!bound.size) continue;
diff --git a/packages/server/src/form-dispatch.js b/packages/server/src/form-dispatch.js
index f46e19ba5..1dc31bb9d 100644
--- a/packages/server/src/form-dispatch.js
+++ b/packages/server/src/form-dispatch.js
@@ -286,7 +286,8 @@ export async function runFormAction(route, params, url, req, ssrOpts, deps) {
     formData = new FormData();
   }
 
-  const id = formData.get(FORM_ACTION_FIELD);
+  const actions = formData.getAll(FORM_ACTION_FIELD);
+  const id = actions.length ? actions[actions.length - 1] : null;
   // A form body carrying no identity: a hand-written `<form method="post">`
   // that binds no action. Nothing to run, and the page only renders.
   if (typeof id !== 'string' || !id) return methodNotAllowed();
diff --git a/packages/server/test/routing/form-dispatch.test.js b/packages/server/test/routing/form-dispatch.test.js
index d77239926..4fae6e01c 100644
--- a/packages/server/test/routing/form-dispatch.test.js
+++ b/packages/server/test/routing/form-dispatch.test.js
@@ -200,6 +200,40 @@ export default () => html\`<form action=\${save}><p>ok</p></form>\`;
   assert.equal(resp.headers.get('location'), '/save');
 });
 
+test('multi-submitter form dispatch: last __webjs_action entry wins (submitter precedence)', async () => {
+  const appDir = makeApp({
+    'modules/multi/actions/multi.server.ts': `'use server';\nexport async function formAction() { return { success: true }; }\nexport async function buttonAction() { return { success: true }; }\n`,
+    'app/multi/page.ts': `
+      import { html } from ${CORE};
+      import { formAction, buttonAction } from '../../modules/multi/actions/multi.server.ts';
+      export default () => html\`
+        <form action=\${formAction}>
+          <button formaction=\${buttonAction}>Delete</button>
+        </form>
+      \`;
+    `,
+  });
+  const app = await createRequestHandler({ appDir, dev: true });
+  await app.warmup();
+
+  const getResp = await app.handle(new Request('http://x/multi'));
+  const htmlStr = await getResp.text();
+  const ids = Array.from(htmlStr.matchAll(/name="__webjs_action" value="([^"]*)"/g), m => m[1]);
+  assert.equal(ids.length, 2, 'renders both form action and button formaction identities');
+
+  const body = new URLSearchParams();
+  body.append('__webjs_action', ids[0]);
+  body.append('__webjs_action', ids[1]);
+
+  const postResp = await app.handle(new Request('http://x/multi', {
+    method: 'POST',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    body: body.toString(),
+  }));
+
+  assert.equal(postResp.status, 303);
+});
+
 test('a page that binds no action answers 405 on POST, not 404', async () => {
   // The path exists and renders; the method is what is wrong. Under the page
   // `action` export this was a 404, which said the url did not exist.
diff --git a/test/bun/form-action-guard.mjs b/test/bun/form-action-guard.mjs
index efba0d13a..23b29956c 100644
--- a/test/bun/form-action-guard.mjs
+++ b/test/bun/form-action-guard.mjs
@@ -74,21 +74,21 @@ async function drain(stream) {
 const refused = {
   'action="${fn}"': () => html`<form action="${leaky}"></form>`,
   'mixed action="/x/${fn}"': () => html`<form action="/x/${leaky}"></form>`,
-  'formaction=${fn}': () => html`<button type="submit" formaction=${leaky}></button>`,
   'quoted prop .action="${fn}"': () => html`<form .action="${leaky}"></form>`,
   'quoted bool ?action="${fn}"': () => html`<form ?action="${leaky}"></form>`,
   'quoted event @action="${fn}"': () => html`<form @action="${leaky}"></form>`,
   'native prop .action=${fn}': () => html`<form .action=${leaky}></form>`,
   'unquoted bool ?action=${fn}': () => html`<form ?action=${leaky}></form>`,
   'array-wrapped action=${[fn]}': () => html`<form action=${[leaky]}></form>`,
-  // Case folding, on both runtimes: every other row here spells the attribute
-  // lowercase, and with those alone the `.toLowerCase()` in isFormActionAttr
-  // could be deleted with this whole table still green while `formAction=`
-  // leaked. camelCase is React's spelling, so it is the likeliest arrival.
-  'camelCase formAction=${fn}': () => html`<button type="submit" formAction=${leaky}></button>`,
+  'quoted formaction="${fn}"': () => html`<form action=${'/x'}><button formaction="${leaky}"></button></form>`,
   'reflecting prop .formAction=${fn} on a button': () => html`<button .formAction=${leaky}></button>`,
 };
 
+const refusedUnboundSubmitter = {
+  'formaction=${fn}': () => html`<button type="submit" formaction=${leaky}></button>`,
+  'camelCase formAction=${fn}': () => html`<button type="submit" formAction=${leaky}></button>`,
+};
+
 /**
  * The two shapes #1155 turned into a BINDING rather than a stringify:
  * `action=${fn}` and its case-folded spelling, on a `<form>`. They still refuse
@@ -98,6 +98,7 @@ const refused = {
 const refusedAsUnidentified = {
   'action=${fn}': () => html`<form action=${leaky}></form>`,
   'upper-case ACTION=${fn}': () => html`<form ACTION=${leaky}></form>`,
+  'formaction=${fn} inside bound form': () => html`<form action=${leaky}><button formaction=${leaky}></button></form>`,
 };
 
 for (const [name, mk] of Object.entries(refused)) {
@@ -109,10 +110,6 @@ for (const [name, mk] of Object.entries(refused)) {
   assert.ok(!threw.message.includes('BUN_PARITY_SECRET'),
     `[${runtime}] the refusal message must not carry the source it withholds (${name})`);
 
-  // Streaming renderer, the second, independent state machine. Matches the
-  // message too: asserting only that SOMETHING threw would be satisfied by any
-  // unrelated error, which is how a machine that refuses for the wrong reason
-  // slips through a parity check.
   let streamThrew = null;
   try { await drain(renderToStream(mk(), { ssr: false })); } catch (e) { streamThrew = e; }
   assert.ok(streamThrew, `[${runtime}] streaming SSR must refuse ${name}`);
@@ -122,6 +119,18 @@ for (const [name, mk] of Object.entries(refused)) {
     `[${runtime}] streaming refusal must not carry the source (${name})`);
 }
 
+for (const [name, mk] of Object.entries(refusedUnboundSubmitter)) {
+  let threw = null;
+  try { await renderToString(mk(), { ssr: true }); } catch (e) { threw = e; }
+  assert.ok(threw, `[${runtime}] buffered SSR must refuse ${name}`);
+  assert.match(threw.message, /requires the enclosing <form> to also be bound/, `[${runtime}] ${name} message`);
+
+  let streamThrew = null;
+  try { await drain(renderToStream(mk(), { ssr: false })); } catch (e) { streamThrew = e; }
+  assert.ok(streamThrew, `[${runtime}] streaming SSR must refuse ${name}`);
+  assert.match(streamThrew.message, /requires the enclosing <form> to also be bound/, `[${runtime}] ${name} message`);
+}
+
 for (const [name, mk] of Object.entries(refusedAsUnidentified)) {
   for (const [machine, run] of [
     ['buffered', () => renderToString(mk(), { ssr: true })],
diff --git a/test/bun/form-action-submitter-parity.test.mjs b/test/bun/form-action-submitter-parity.test.mjs
new file mode 100644
index 000000000..d1d74f8e4
--- /dev/null
+++ b/test/bun/form-action-submitter-parity.test.mjs
@@ -0,0 +1,44 @@
+/**
+ * Cross-runtime parity test for per-submitter `formaction=${action}` (#1207).
+ */
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { renderToString, html, setFormActionResolver } from '@webjsdev/core';
+
+setFormActionResolver(async (fn) => {
+  return fn.name ? `hash/${fn.name}` : null;
+});
+
+async function saveAction() {}
+async function deleteAction() {}
+
+test('SSR: formaction=${fn} on submitter inside bound form emits submitter name=__webjs_action', async () => {
+  const tpl = html`
+    <form action=${saveAction}>
+      <button formaction=${deleteAction}>Delete</button>
+    </form>
+  `;
+  const out = await renderToString(tpl, { ssr: true });
+  assert.match(out, /<input type="hidden" name="__webjs_action" value="hash\/saveAction">/);
+  assert.match(out, /<button name="__webjs_action" value="hash\/deleteAction">Delete<\/button>/);
+});
+
+test('SSR: formaction=${fn} on unbound button throws actionable refusal', async () => {
+  const tpl = html`<button formaction=${deleteAction}>Delete</button>`;
+  await assert.rejects(
+    () => renderToString(tpl, { ssr: true }),
+    /requires the enclosing <form> to also be bound/,
+  );
+});
+
+test('SSR: formaction=${fn} on submitter with name attribute throws refusal', async () => {
+  const tpl = html`
+    <form action=${saveAction}>
+      <button name="intent" formaction=${deleteAction}>Delete</button>
+    </form>
+  `;
+  await assert.rejects(
+    () => renderToString(tpl, { ssr: true }),
+    /already carries a "name" attribute/,
+  );
+});
diff --git a/website/app/docs/migrating-from-nextjs/page.ts b/website/app/docs/migrating-from-nextjs/page.ts
index 2ac40e5d5..ddc1d467c 100644
--- a/website/app/docs/migrating-from-nextjs/page.ts
+++ b/website/app/docs/migrating-from-nextjs/page.ts
@@ -103,7 +103,7 @@ Counter.register('my-counter');</pre>
 
     <h2>What ports cleanly, and what does not</h2>
     <p><strong>Ports directly:</strong> the <code>app/</code> directory layout, dynamic segments (<code>[id]</code>, <code>[...rest]</code>, <code>[[...rest]]</code>), route groups (<code>(group)</code>), the metadata API, route handlers, middleware, and the <code>loading</code> / <code>error</code> / <code>not-found</code> conventions.</p>
-    <p><strong>Needs rethinking:</strong> anything written as a Client Component becomes a web component; anything fetching server data moves into a <code>.server</code> action; React state becomes signals; <code>next/link</code> becomes a plain link. Write progressive-enhancement-first: a <code>&lt;form&gt;</code> plus a server action instead of a <code>fetch</code> in a click handler, since the form works without JavaScript and the client router upgrades it automatically. The form binding ports directly: <code>&lt;form action={serverAction}&gt;</code> in Next is <code>&lt;form action=\${serverAction}&gt;</code> here, and it is the only way WebJs submits a form to an action. What differs is underneath: React serializes the binding, bound arguments included, into hidden fields, while WebJs emits ONE hidden field carrying the action's identity and no arguments, so a per-row action takes its row id from a hidden input rather than from <code>action.bind(null, id)</code>. One divergence to know: <code>formaction=</code> on a submit button is refused, so a form with several buttons binds one action and dispatches on a button's <code>name</code>.</p>
+    <p><strong>Needs rethinking:</strong> anything written as a Client Component becomes a web component; anything fetching server data moves into a <code>.server</code> action; React state becomes signals; <code>next/link</code> becomes a plain link. Write progressive-enhancement-first: a <code>&lt;form&gt;</code> plus a server action instead of a <code>fetch</code> in a click handler, since the form works without JavaScript and the client router upgrades it automatically. The form binding ports directly: <code>&lt;form action={serverAction}&gt;</code> in Next is <code>&lt;form action=\${serverAction}&gt;</code> here, and per-button submitter actions work via <code>&lt;button formaction=\${deleteAction}&gt;</code>. What differs is underneath: React serializes the binding, bound arguments included, into hidden fields, while WebJs emits ONE hidden field per bound action carrying its identity and no arguments, so a per-row action takes its row id from a hidden input rather than from <code>action.bind(null, id)</code>.</p>
     <p><strong>Not provided:</strong> image and font optimization, i18n, and a static export. WebJs is a no-build, standards-based framework, so these are libraries you layer on, not built-ins.</p>
     <p>Next steps: read <a href="/docs/getting-started">Getting Started</a> to scaffold an app, <a href="/docs/architecture">Architecture</a> for the execution model in depth, and <a href="/docs/progressive-enhancement">Progressive Enhancement</a> for the design posture that replaces the Client Component habit.</p>
   `;
diff --git a/website/app/docs/progressive-enhancement/page.ts b/website/app/docs/progressive-enhancement/page.ts
index ca0c2c719..6737d87dd 100644
--- a/website/app/docs/progressive-enhancement/page.ts
+++ b/website/app/docs/progressive-enhancement/page.ts
@@ -169,7 +169,7 @@ export default function NewPost({ actionData }: {
     </p>
 
     <p>
-      A form that binds nothing gets a <code>405</code>: there is no page <code>action</code> export to catch a bare <code>&lt;form method="post"&gt;</code>. A form with several submit buttons binds one action and dispatches on a button's <code>name</code>, since <code>formaction=\${fn}</code> is not supported yet (tracked in issue #1207).
+      A form that binds nothing gets a <code>405</code>: there is no page <code>action</code> export to catch a bare <code>&lt;form method="post"&gt;</code>. Multi-submitter forms can bind per-button actions using <code>formaction=\${action}</code> on submitter buttons inside a bound form, which work with JavaScript disabled via standard DOM submitter precedence.
     </p>
 
     <p>
diff --git a/website/app/docs/server-actions/page.ts b/website/app/docs/server-actions/page.ts
index 477bb802a..e0a6847d2 100644
--- a/website/app/docs/server-actions/page.ts
+++ b/website/app/docs/server-actions/page.ts
@@ -472,7 +472,7 @@ export default function NewPost({ actionData }: {
       <li><strong>An identity that no longer resolves</strong> is a <code>422</code> re-render carrying a resubmit message and the submitted values. That is a form held open across a deploy; a 404 would discard what was typed and a silent success would report a write that never happened.</li>
     </ul>
     <p>Everything the action declares applies here too, or an action would be protected over RPC and open over a form: <code>validate</code> runs on the submitted <code>FormData</code>, the <code>middleware</code> chain runs (with the page's <code>params</code> / <code>searchParams</code> / <code>url</code> on <code>ctx</code>), and <code>invalidates</code> is evicted when the action actually ran. The submission is Origin-verified exactly like an RPC call, so a no-JS form needs no CSRF token field. An action declaring <code>method = 'GET'</code> cannot be bound to a form (it rides its arguments in the URL and skips the CSRF check), which is a <code>405</code> at runtime and the <code>form-action-not-a-get-action</code> error in <code>webjs check</code>. A streamed return is refused on this path: a submission is answered with a redirect or a page, and with JS off there is no consumer for frames.</p>
-    <p><code>formaction=\${fn}</code> on a submit button is not supported yet, so it is refused rather than silently ignored. A form with several buttons binds ONE action and dispatches on a button's <code>name</code>. Per-button actions are tracked in issue #1207.</p>
+    <p>Submit buttons can also bind per-button server actions via <code>formaction=\${action}</code> on a <code>&lt;button&gt;</code> or <code>&lt;input type="submit"&gt;</code> inside a bound form. Without JavaScript, the clicked submitter button posts its identity field and takes precedence over the form's default action. Submitters cannot carry their own <code>name</code> attribute, use <code>&lt;input type="image"&gt;</code>, or declare <code>formmethod="get"</code> / <code>formenctype="text/plain"</code>.</p>
     <p>With JavaScript off this is a native round-trip (the browser submits, follows the 303, or renders the 422). With JavaScript on the client router applies the 422 in place (no reload, typed input preserved) and follows the 303 via fetch. Both ends of the progressive-enhancement spectrum from one piece of code, no form library. See the <a href="/docs/client-router">client router</a> docs for the rendering behavior, and <a href="/docs/progressive-enhancement">progressive enhancement</a> for the full write-path pattern.</p>
   `;
 }
diff --git a/website/app/docs/troubleshooting/page.ts b/website/app/docs/troubleshooting/page.ts
index a2fd0a021..c22b61103 100644
--- a/website/app/docs/troubleshooting/page.ts
+++ b/website/app/docs/troubleshooting/page.ts
@@ -47,7 +47,7 @@ export default function Troubleshooting() {
     <p><strong>Cause:</strong> during SSR an imported <code>'use server'</code> action is the REAL function (the RPC stub exists only in the browser). The supported binding resolves that function's identity instead of stringifying it, but in any OTHER shape <code>action=</code> is an ordinary attribute hole, so stringifying it would write the action's whole body into the HTML every visitor downloads: its logic, the query shapes it builds, and any literal written inside it, a connection string or internal path included.</p>
     <p><strong>Assume outer values are exposed too.</strong> On Node, <code>Function.prototype.toString</code> returns source text, so a module-scope <code>const</code> the body reads appears only as its identifier. That is NOT a guarantee you can rely on: Bun transpiles a module before the engine sees it and can fold a module-scope string literal straight into the body, so the same action reports <code>Authorization: "Bearer sk_live_…"</code> where Node reports <code>Bearer \${VENDOR_API_KEY}</code>. Do not go looking for the rule that decides when it folds. It is a transpiler's internal choice rather than a documented boundary, and two modules on the same Bun version can differ. Whether a secret in an outer binding escapes therefore depends on the runtime and on how the module was transformed, and it is not a boundary worth building a habit on. Treat everything reachable from the action as exposed, which is what the refusal assumes. WebJs refuses rather than emitting it. The refusal covers every shape that is not the binding: <code>formaction=</code> anywhere, <code>action=\${fn}</code> on a tag that is not a <code>&lt;form&gt;</code>, a quoted <code>action="\${fn}"</code> or mixed <code>action="/x/\${fn}"</code> (quoting turns a binding hole back into a plain attribute), and a function wrapped in an array (<code>action=\${[fn]}</code>), which stringifies its elements the same way. One shape it does not cover: a hole inside an HTML comment is emitted raw by the renderer, so commenting a working form out does NOT disable the interpolation, it turns the binding back into a leak. Delete the form rather than commenting around it. <code>.action=\${fn}</code> on a native form is refused at SSR too, even though the property is dropped there, so a page cannot render clean on the server and then throw on hydration, where the reflected IDL attribute would carry the source into the live DOM.</p>
     <p><strong>Two things stay legal</strong>, because neither stringifies its value: a custom element's <code>.action</code> property (an author-defined property, not the reflected IDL attribute a native <code>&lt;form&gt;</code> has, so <code>&lt;my-el .action=\${fn}&gt;</code> is fine), and an unquoted <code>@action=\${fn}</code> event listener, where a function is exactly what is wanted. One qualification on the first: that holds for a plain property, and NOT if the component declares it <code>reflect: true</code>. Reflection is a separate path that writes <code>String(value)</code> into the attribute without passing through the template commit sites this guard covers, so a reflecting <code>action</code> prop still emits the function's source. That path is a general problem with reflecting any function-valued prop rather than an <code>action</code> one, and it is tracked separately. Quoting a binding hole turns it back into a plain attribute, so <code>@action="\${fn}"</code> IS refused; that is the practical reason invariant 4 requires <code>@</code>, <code>.</code> and <code>?</code> holes to be unquoted. <code>?action=\${fn}</code> is refused as well: it never leaked, but a truthy function would silently emit a bare <code>action=""</code>, which is never what anyone meant.</p>
-    <p><strong>Fix:</strong> write the binding exactly: an unquoted <code>action=\${importedAction}</code> on the <code>&lt;form&gt;</code> itself, with the function imported from a <code>'use server'</code> module. Do not add <code>method</code> or <code>enctype</code>; the renderer supplies both. For a form with several submit buttons, bind one action and dispatch on a button's <code>name</code>, since <code>formaction=\${fn}</code> is refused. A string action is unaffected. See <a href="/docs/server-actions">Server Actions</a> and <a href="/docs/progressive-enhancement">Progressive Enhancement</a>.</p>
+    <p><strong>Fix:</strong> write the binding exactly: an unquoted <code>action=\${importedAction}</code> on the <code>&lt;form&gt;</code> itself, or <code>formaction=\${importedAction}</code> on a submitter button inside a bound form, with the function imported from a <code>'use server'</code> module. Do not add <code>method</code> or <code>enctype</code>; the renderer supplies both. A string action is unaffected. See <a href="/docs/server-actions">Server Actions</a> and <a href="/docs/progressive-enhancement">Progressive Enhancement</a>.</p>
 
     <h2>A form submission answered with a 405</h2>
     <p><strong>Symptom:</strong> submitting a form returns <code>405 Method Not Allowed</code> with <code>Allow: GET, HEAD</code>, and the page itself renders fine on a GET.</p>

From 9c63c69163bd777384e13cf61c8f78e1662b2cd6 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sat, 1 Aug 2026 20:09:11 +0530
Subject: [PATCH 2/8] docs: update scaffold gallery template and skill
 references for #1207

---
 .agents/skills/webjs/references/optimistic-ui.md            | 2 +-
 .../gallery/modules/todo/actions/submit-todo.server.ts      | 6 ++----
 website/app/docs/progressive-enhancement/page.ts            | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/.agents/skills/webjs/references/optimistic-ui.md b/.agents/skills/webjs/references/optimistic-ui.md
index 6873483eb..03f6eaa71 100644
--- a/.agents/skills/webjs/references/optimistic-ui.md
+++ b/.agents/skills/webjs/references/optimistic-ui.md
@@ -94,7 +94,7 @@ render() {
 
 `method` and the enctype are supplied by the renderer, and the hidden identity field is re-inserted as the form's first child on every client render, so there is nothing to manage by hand.
 
-When a page owns SEVERAL mutations (create, toggle, delete), give each form its OWN binding (`action=${createTodo}` / `action=${toggleTodo}` / `action=${deleteTodo}`). Each interactive control is its own tiny form, which is currently required rather than merely tidy: `formaction=${fn}` on a submit button is not supported yet (tracked in #1207). A form that genuinely needs several buttons binds ONE action and dispatches on a submit button's `name="intent"` inside it.
+When a page owns SEVERAL mutations (create, toggle, delete), give each form its OWN binding (`action=${createTodo}` / `action=${toggleTodo}` / `action=${deleteTodo}`), or use per-button submitter server action bindings via `formaction=${action}` on submitter buttons inside a bound form (#1207). Alternatively, a form that dispatches dynamically can bind ONE action and inspect a submit button's `name="intent"`.
 
 ## Seed the list from the server for SSR plus optimistic
 
diff --git a/packages/cli/templates/gallery/modules/todo/actions/submit-todo.server.ts b/packages/cli/templates/gallery/modules/todo/actions/submit-todo.server.ts
index 514544697..cdda15f77 100644
--- a/packages/cli/templates/gallery/modules/todo/actions/submit-todo.server.ts
+++ b/packages/cli/templates/gallery/modules/todo/actions/submit-todo.server.ts
@@ -8,10 +8,8 @@ import { deleteTodo } from './delete-todo.server.ts';
 // THIS action, and the submit button's own `name="intent"` says which mutation
 // to run, which is how one form serves several buttons.
 //
-// Why an intent dispatcher rather than binding each button to its own action:
-// `formaction=${fn}` on a submit button is not supported yet (tracked in
-// #1207). So a form binds ONE action, and a form with several buttons
-// dispatches on the intent here.
+// Alternatively, per-button submitter server actions can be bound directly via
+// `formaction=${action}` on <button> or <input type="submit"> (#1207).
 //
 // With JS the component intercepts the submit and calls the underlying action
 // directly for the optimistic path, so this runs only with JS off.
diff --git a/website/app/docs/progressive-enhancement/page.ts b/website/app/docs/progressive-enhancement/page.ts
index 6737d87dd..d037adf1b 100644
--- a/website/app/docs/progressive-enhancement/page.ts
+++ b/website/app/docs/progressive-enhancement/page.ts
@@ -173,7 +173,7 @@ export default function NewPost({ actionData }: {
     </p>
 
     <p>
-      One honest limit on "identical by construction": it is a claim about the FORM, and the renderers do not read a submitter's own <code>formmethod</code> / <code>formenctype</code>. So <code>&lt;form action=\${fn}&gt;&lt;button formenctype="text/plain"&gt;</code> submits fine with JS (the router posts <code>FormData</code> and ignores the attribute) and is a bare <code>405</code> without it, with nothing refused at render. Leave those attributes off a bound form until #1207 closes the gap.
+      The renderer validates and refuses unparseable submitter options at render time: a submitter button carrying a <code>name</code> attribute, using <code>&lt;input type="image"&gt;</code>, or setting <code>formmethod="get"</code> or <code>formenctype="text/plain"</code> throws an actionable refusal error so both JS and no-JS execution paths stay identical by construction (#1207).
     </p>
 
     <h3>3. Make components render correctly on the server</h3>

From 8ab17a83a26a597a61c979f477c25abac793b357 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sat, 1 Aug 2026 20:15:29 +0530
Subject: [PATCH 3/8] docs(gallery): update todo-app comment for unified bound
 form actions (#1205)

---
 .../cli/templates/gallery/modules/todo/components/todo-app.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/templates/gallery/modules/todo/components/todo-app.ts b/packages/cli/templates/gallery/modules/todo/components/todo-app.ts
index 982995ff0..cc588266d 100644
--- a/packages/cli/templates/gallery/modules/todo/components/todo-app.ts
+++ b/packages/cli/templates/gallery/modules/todo/components/todo-app.ts
@@ -1,6 +1,6 @@
 // The interactive surface. Demonstrates: the WebComponent factory + reactive
 // prop, the DECLARATIVE optimistic() API (instant update, auto-rollback), and
-// progressive enhancement (each mutation is a <form> posting to the page action,
+// progressive enhancement (each mutation is a <form action=${submitTodo}> bound to a server action,
 // intercepted by JS for the optimistic path). All interactivity lives in a
 // component; a page/layout cannot be interactive in its own markup.
 //

From 2be8e6857c02a2597175fda6d0b15e4d2b6829f9 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sat, 1 Aug 2026 20:18:48 +0530
Subject: [PATCH 4/8] fix(core): refuse non-POST formmethod values (PATCH, PUT,
 DELETE, GET) on submitters (#1207)

---
 packages/core/src/render-server.js                       | 4 ++--
 packages/core/test/rendering/form-action-binding.test.js | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/render-server.js b/packages/core/src/render-server.js
index 0d193d850..ee96cd5f4 100644
--- a/packages/core/src/render-server.js
+++ b/packages/core/src/render-server.js
@@ -200,7 +200,7 @@ async function renderTemplate(tr, ctx) {
         );
       }
       const formMethod = attrs.get('formmethod');
-      if (formMethod != null && /^get$/i.test(formMethod)) {
+      if (formMethod != null && !/^post$/i.test(formMethod)) {
         throw new Error(
           `[webjs] formaction=\${action} on <${tag}> with formmethod="${formMethod}" `
           + `cannot work: a bound server action is submitted as a POST body.`,
@@ -1892,7 +1892,7 @@ async function streamTemplate(tr, ctx, controller) {
         );
       }
       const formMethod = attrs.get('formmethod');
-      if (formMethod != null && /^get$/i.test(formMethod)) {
+      if (formMethod != null && !/^post$/i.test(formMethod)) {
         throw new Error(
           `[webjs] formaction=\${action} on <${tag}> with formmethod="${formMethod}" `
           + `cannot work: a bound server action is submitted as a POST body.`,
diff --git a/packages/core/test/rendering/form-action-binding.test.js b/packages/core/test/rendering/form-action-binding.test.js
index dd15cb1c7..0fa1048da 100644
--- a/packages/core/test/rendering/form-action-binding.test.js
+++ b/packages/core/test/rendering/form-action-binding.test.js
@@ -371,6 +371,12 @@ test('formaction=${fn} submitter refusals: name attribute, input type=image, unp
     () => renderToString(html`<form action=${submitFeedback}><button formaction=${submitFeedback} formmethod="get">Save</button></form>`, { ssr: true }),
     /formmethod="get"/,
   );
+
+  // 5. Submitter formmethod="PATCH":
+  await assert.rejects(
+    () => renderToString(html`<form action=${submitFeedback}><button formaction=${submitFeedback} formmethod="PATCH">Save</button></form>`, { ssr: true }),
+    /formmethod="PATCH"/,
+  );
 });
 
 test('two action holes are refused whichever position the bound one is in', async () => {

From 2b8ea56e8defcb6ebff173c778214517787e3048 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sat, 1 Aug 2026 20:55:06 +0530
Subject: [PATCH 5/8] test(core): update ssr-client-parity browser test for
 #1207 submitter support

---
 packages/core/test/rendering/browser/ssr-client-parity.test.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/test/rendering/browser/ssr-client-parity.test.js b/packages/core/test/rendering/browser/ssr-client-parity.test.js
index 0aa8902b0..b898adece 100644
--- a/packages/core/test/rendering/browser/ssr-client-parity.test.js
+++ b/packages/core/test/rendering/browser/ssr-client-parity.test.js
@@ -410,6 +410,7 @@ suite('SSR/client parity: form actions (#1155)', () => {
     // without JS and urlencoded with it.
     'inert encoding= attribute': () => html`<form action=${boundAction()} encoding=${'application/x-www-form-urlencoded'}></form>`,
     'inert encoding= with an unsubmittable value': () => html`<form action=${boundAction()} encoding=${'text/plain'}></form>`,
+    'submitter formaction inside bound form': () => html`<form action=${boundAction()}><button formaction=${boundAction()}>Save</button></form>`,
   };
 
   for (const [name, tpl] of Object.entries(ACCEPTS)) {
@@ -433,7 +434,7 @@ suite('SSR/client parity: form actions (#1155)', () => {
     'quoted action hole is a stringify': [() => html`<form action="${boundAction()}"></form>`, /interpolated into/],
     'array-wrapped action': [() => html`<form action=${[boundAction()]}></form>`, /interpolated into/],
     'action off a form': [() => html`<div action=${boundAction()}></div>`, /interpolated into/],
-    'formaction anywhere': [() => html`<button formaction=${boundAction()}></button>`, /interpolated into/],
+    'formaction anywhere': [() => html`<button formaction=${boundAction()}></button>`, /requires the enclosing <form>/],
     'a function that is not an action': [() => html`<form action=${async () => {}}></form>`, /is not a server action/],
     'prop binding on a bound form': [() => html`<form action=${boundAction()} .method=${'get'}></form>`, /also binds \./],
     'two action holes': [() => html`<form action=${boundAction()} action=${'/legacy'}></form>`, /two action=/],

From 935ac1ad665c3e769d49999a0b34b2692b9d74a6 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sat, 1 Aug 2026 23:44:21 +0530
Subject: [PATCH 6/8] fix(core): enforce non-POST submitter refusal in CSR and
 restore form-action JSDocs

---
 packages/core/src/form-action.js              | 35 ++++++++++++++++---
 packages/core/src/render-client.js            |  2 +-
 .../form-action-binding-client.test.js        | 13 +++++++
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/form-action.js b/packages/core/src/form-action.js
index 3176642b1..608f148df 100644
--- a/packages/core/src/form-action.js
+++ b/packages/core/src/form-action.js
@@ -427,6 +427,12 @@ export function reconcileFormAction(form, value, method, enctype, shape) {
 
 /**
  * Write (or leave) one resolved attribute.
+ *
+ * `inject` non-null means the template supplies nothing and the framework owns
+ * this attribute, so it is set. Otherwise the author's own value is already on
+ * the element, put there by whichever commit branch owns that hole, and is left
+ * exactly as written.
+ *
  * @param {Element} form
  * @param {string} name
  * @param {string | typeof ABSENT} authored
@@ -441,6 +447,12 @@ function applyResolvedAttr(form, name, authored, inject) {
 
 /**
  * Ensure the hidden identity field is present, first, and current.
+ *
+ * FIRST is load-bearing: it puts the field outside every child part's marker
+ * range, so a later child update cannot take it out. `firstElementChild` is the
+ * fast path because both this function and SSR put it there. Uses form.ownerDocument
+ * to support detached or iframe document contexts.
+ *
  * @param {HTMLFormElement} form
  * @param {string} id
  */
@@ -459,7 +471,8 @@ function ensureIdentityField(form, id) {
     }
   }
   if (!field) {
-    field = document.createElement('input');
+    const doc = form.ownerDocument || document;
+    field = doc.createElement('input');
     field.type = 'hidden';
     field.name = FORM_ACTION_FIELD;
     form.insertBefore(field, form.firstChild);
@@ -468,8 +481,12 @@ function ensureIdentityField(form, id) {
 }
 
 /**
- * Release a form that was candidate-bound when its value turns out NOT to be an
- * action function.
+ * Drop a binding whose action hole no longer resolves to an action.
+ *
+ * Both halves matter. The identity field has to go, or the form keeps posting
+ * the old action's identity to whatever it now targets. And the attributes the
+ * framework supplied have to go with it.
+ *
  * @param {HTMLFormElement} form
  * @param {string | typeof ABSENT} method
  * @param {string | typeof ABSENT} enctype
@@ -491,7 +508,12 @@ function releaseFormAction(form, method, enctype, propAttrs) {
 }
 
 /**
- * Parse start tag attributes into a map.
+ * Parse the attributes of an emitted start tag into `name -> value`, where a
+ * valueless attribute maps to the empty string.
+ *
+ * A real tokenizer rather than a regex over the whole tag, because the tag is
+ * emitted HTML and an attribute VALUE can contain anything (e.g. `data-note="use method=get"`).
+ *
  * @param {string} startTag
  * @returns {Map<string, string>}
  */
@@ -543,6 +565,11 @@ function reflectsAsFormAction(propName, tag) {
 
 /**
  * Does stringifying this value expose a function's source?
+ *
+ * `Array.prototype.toString` stringifies each element through `String()` too,
+ * so `action=${[serverAction]}` leaks exactly as `action=${serverAction}` does.
+ * Tracks visited arrays because `Array.prototype.join` has a cycle guard.
+ *
  * @param {unknown} val
  * @param {Set<unknown>} [seen]
  * @returns {boolean}
diff --git a/packages/core/src/render-client.js b/packages/core/src/render-client.js
index 4faddb426..410336ba6 100644
--- a/packages/core/src/render-client.js
+++ b/packages/core/src/render-client.js
@@ -663,7 +663,7 @@ function reconcileSubmitterAction(el, value, rec) {
     );
   }
   const formMethod = el.getAttribute('formmethod');
-  if (formMethod != null && /^get$/i.test(formMethod)) {
+  if (formMethod != null && !/^post$/i.test(formMethod)) {
     throw new Error(
       `[webjs] formaction=\${action} on <${el.localName}> with formmethod="${formMethod}" `
       + `cannot work: a bound server action is submitted as a POST body.`,
diff --git a/packages/core/test/rendering/form-action-binding-client.test.js b/packages/core/test/rendering/form-action-binding-client.test.js
index f5b0d0c60..3ade63fec 100644
--- a/packages/core/test/rendering/form-action-binding-client.test.js
+++ b/packages/core/test/rendering/form-action-binding-client.test.js
@@ -507,6 +507,19 @@ test('two action holes are refused with the BOUND one written second', () => {
     /two action=/,
   );
 });
+
+test('submitter non-POST formmethod is refused on the client (get and PATCH)', () => {
+  const host = document.createElement('div');
+  const HOISTED = stub(ID);
+  assert.throws(
+    () => render(html`<form action=${HOISTED}><button formaction=${HOISTED} formmethod="get">Save</button></form>`, host),
+    /formmethod="get"/,
+  );
+  assert.throws(
+    () => render(html`<form action=${HOISTED}><button formaction=${HOISTED} formmethod="PATCH">Save</button></form>`, host),
+    /formmethod="PATCH"/,
+  );
+});
 // NOTE: the release path's other guard, "an unbound form keeps a `.method` the
 // template writes as a PROPERTY", is asserted in `browser/form-action-guard.test.js`
 // instead. It turns entirely on the write reflecting to the content attribute,

From d7424661b80c4e4d9a9d0734fce3ab6710598161 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sun, 2 Aug 2026 02:11:19 +0530
Subject: [PATCH 7/8] fix(core): harden submitter action bindings

---
 packages/core/src/form-action.js              | 104 ++++++++++++-
 packages/core/src/render-client.js            |  82 +++++++++-
 packages/core/src/render-server.js            | 140 ++++++++++--------
 .../form-action-binding-client.test.js        |  47 ++++++
 .../rendering/form-action-binding.test.js     |  44 ++++++
 .../rendering/render-server-streaming.test.js |  20 +++
 .../bun/form-action-submitter-parity.test.mjs |  21 +++
 7 files changed, 384 insertions(+), 74 deletions(-)

diff --git a/packages/core/src/form-action.js b/packages/core/src/form-action.js
index 608f148df..13494cbb2 100644
--- a/packages/core/src/form-action.js
+++ b/packages/core/src/form-action.js
@@ -27,7 +27,7 @@ import { escapeAttr } from './escape.js';
  * browser), so a plain `String(val)` commit serializes the action's body,
  * secrets included, to every visitor. The refusal list is deliberately wider
  * than the leak: a quoted `action="${fn}"`, `?action=${fn}`, an array holding
- * a function, `formaction=` anywhere, and `action=` on a tag that is not a
+ * a function, an unsupported `formaction=` shape, and `action=` on a tag that is not a
  * `<form>` all refuse, so there is exactly one way to write this and no
  * silently-broken near-miss.
  *
@@ -155,9 +155,10 @@ export function isBoundFormAction(val, attrName, tag) {
  *
  * @param {string} name
  * @param {string} [tag]
+ * @param {boolean} [allowFrameworkName]
  */
-export function assertSubmitterHasNoName(name, tag) {
-  if (name && name !== FORM_ACTION_FIELD) {
+export function assertSubmitterHasNoName(name, tag, allowFrameworkName = true) {
+  if (name && (name !== FORM_ACTION_FIELD || !allowFrameworkName)) {
     throw new Error(
       `[webjs] formaction=\${action} on <${tag || 'button'}> cannot be used when `
       + `the element already carries a "name" attribute (found name="${name}"). `
@@ -180,6 +181,73 @@ export function assertSubmitterNotImage(tag) {
   );
 }
 
+/**
+ * Refuse a formaction binding on a control that is not a submitter.
+ *
+ * @param {string} tag
+ * @param {string | null | undefined} type
+ */
+export function assertSubmitterType(tag, type) {
+  const t = String(tag || '').toLowerCase();
+  const value = type == null ? null : String(type).toLowerCase();
+  if (t === 'button' && (value == null || value === '' || value === 'submit')) return;
+  if (t === 'input' && value === 'submit') return;
+  if (t === 'input' && value === 'image') {
+    assertSubmitterNotImage(t);
+  }
+  throw new Error(
+    `[webjs] formaction=\${action} on <${t}> requires a submitter control. `
+    + `Use <button type="submit"> or <input type="submit">.`,
+  );
+}
+
+/**
+ * Refuse an author value because the action identity occupies that channel.
+ * @param {string} tag
+ */
+export function assertSubmitterHasNoValue(tag) {
+  throw new Error(
+    `[webjs] formaction=\${action} on <${tag || 'button'}> cannot be used when `
+    + `the element already carries a "value" attribute. The action identity `
+    + `uses the submitter value channel; remove "value" or use a separate form.`,
+  );
+}
+
+/**
+ * Refuse a static formaction alongside the function binding.
+ * @param {string} tag
+ */
+export function assertSubmitterHasNoStaticFormAction(tag) {
+  throw new Error(
+    `[webjs] a bound formaction=\${action} on <${tag || 'button'}> cannot also `
+    + `carry a plain formaction attribute. Drop the static attribute.`,
+  );
+}
+
+/**
+ * Refuse a submitter whose form owner is selected through the `form` attribute.
+ * @param {string} tag
+ */
+export function assertSubmitterHasNoFormAttribute(tag) {
+  throw new Error(
+    `[webjs] formaction=\${action} on <${tag || 'button'}> cannot be used with `
+    + `a "form" attribute. Keep the submitter inside its bound <form>.`,
+  );
+}
+
+/**
+ * Refuse duplicate formaction holes on one submitter.
+ * @param {boolean} duplicate
+ * @param {string} tag
+ */
+export function assertSingleSubmitterAction(duplicate, tag) {
+  if (!duplicate) return;
+  throw new Error(
+    `[webjs] two formaction=\${action} holes were found on one <${tag || 'button'}>. `
+    + `A submitter can carry only one action binding.`,
+  );
+}
+
 /**
  * Refuse a `formaction=${fn}` submitter whose enclosing form is not bound.
  *
@@ -518,8 +586,17 @@ function releaseFormAction(form, method, enctype, propAttrs) {
  * @returns {Map<string, string>}
  */
 export function parseStartTagAttrs(startTag) {
-  /** @type {Map<string, string>} */
-  const attrs = new Map();
+  return new Map(parseStartTagAttrEntries(startTag));
+}
+
+/**
+ * Parse emitted start-tag attributes while preserving duplicates.
+ * @param {string} startTag
+ * @returns {[string, string][]}
+ */
+function parseStartTagAttrEntries(startTag) {
+  /** @type {[string, string][]} */
+  const entries = [];
   let i = 1;
   while (i < startTag.length && !/[\s/>]/.test(startTag[i])) i++;
   while (i < startTag.length) {
@@ -529,7 +606,7 @@ export function parseStartTagAttrs(startTag) {
     while (i < startTag.length && !/[\s/>=]/.test(startTag[i])) name += startTag[i++];
     while (i < startTag.length && /\s/.test(startTag[i])) i++;
     if (startTag[i] !== '=') {
-      if (name) attrs.set(name.toLowerCase(), '');
+      if (name) entries.push([name.toLowerCase(), '']);
       continue;
     }
     i++;
@@ -543,9 +620,20 @@ export function parseStartTagAttrs(startTag) {
     } else {
       while (i < startTag.length && !/[\s>]/.test(startTag[i])) value += startTag[i++];
     }
-    if (name) attrs.set(name.toLowerCase(), value);
+    if (name) entries.push([name.toLowerCase(), value]);
   }
-  return attrs;
+  return entries;
+}
+
+/**
+ * Count occurrences of an attribute in an emitted start tag.
+ * @param {string} startTag
+ * @param {string} wanted
+ * @returns {number}
+ */
+export function countStartTagAttr(startTag, wanted) {
+  const name = String(wanted).toLowerCase();
+  return parseStartTagAttrEntries(startTag).filter(([attr]) => attr === name).length;
 }
 
 /**
diff --git a/packages/core/src/render-client.js b/packages/core/src/render-client.js
index 410336ba6..e2f8e1bb0 100644
--- a/packages/core/src/render-client.js
+++ b/packages/core/src/render-client.js
@@ -4,8 +4,10 @@ import { escapeAttr } from './escape.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
   reconcileFormAction, isBoundFormAction, ABSENT, assertSubmitterHasNoName,
-  assertSubmitterNotImage, assertSubmitterFormIsBound, formActionId,
-  assertIdentifiableAction, FORM_ACTION_FIELD, PARSEABLE_ENCTYPES,
+  assertSubmitterType, assertSubmitterHasNoValue, assertSubmitterHasNoStaticFormAction,
+  assertSubmitterHasNoFormAttribute, assertSingleSubmitterAction,
+  assertSubmitterFormIsBound, formActionId, assertIdentifiableAction,
+  FORM_ACTION_FIELD, PARSEABLE_ENCTYPES,
 } from './form-action.js';
 import { isRepeat } from './repeat.js';
 import { isUnsafeHTML, isLive, isKeyed, isGuard, isTemplateContent, isRef, isCache, isUntil, isAsyncAppend, isAsyncReplace, isWatch } from './directives.js';
@@ -86,6 +88,9 @@ function commitInto(node, fn) {
  *   actionIdxs: number[],
  *   duplicateAction: boolean,
  *   staticAction: boolean,
+ *   authoredName: boolean,
+ *   authoredValue: boolean,
+ *   authoredForm: boolean,
  *   propAttrs: string[],
  *   staticMethod: string | null,
  *   staticEnctype: string | null,
@@ -96,6 +101,10 @@ function commitInto(node, fn) {
 
 /** @type {WeakMap<TemplateStringsArray | string[], { templateEl: HTMLTemplateElement, parts: PartDescriptor[], formActions: FormActionRecord[] | null }>} */
 const templateCache = new WeakMap();
+/** @type {WeakMap<HTMLFormElement, unknown>} */
+const formActionCandidates = new WeakMap();
+/** @type {WeakMap<Element, string>} */
+const submitterActionBindings = new WeakMap();
 const INSTANCE = Symbol.for('webjs.instance');
 
 /**
@@ -567,6 +576,12 @@ function buildFormActionRecord(el, onEl, parts) {
   /** Prop bindings that cannot converge with SSR; refused when actually bound. */
   const propAttrs = [];
   const hasNamePart = onEl.some((p) => p.name.toLowerCase() === 'name');
+  const authoredName = !isForm && el.hasAttribute('name');
+  const authoredForm = !isForm && el.hasAttribute('form');
+  const authoredValue = !isForm && (el.hasAttribute('value') || onEl.some((p) => {
+    const name = p.name.toLowerCase();
+    return name === 'value' && (p.kind === 'attr' || p.kind === 'attr-mixed' || p.kind === 'bool');
+  }));
 
   for (const p of onEl) {
     const name = String(p.name).toLowerCase();
@@ -589,6 +604,9 @@ function buildFormActionRecord(el, onEl, parts) {
     actionIdxs: actionParts.map((p) => p.idx),
     duplicateAction: actionParts.length > 1,
     staticAction: el.getAttribute(targetAttr) != null,
+    authoredName,
+    authoredValue,
+    authoredForm,
     propAttrs,
     hasNamePart,
     staticMethod: el.getAttribute('method'),
@@ -633,6 +651,35 @@ function reconcileFormActions(formActions, bound, values) {
   }
 }
 
+/**
+ * Remove the identity channel previously injected into a submitter.
+ * @param {Element} el
+ */
+function releaseSubmitterAction(el) {
+  const injected = submitterActionBindings.has(el) || el.getAttribute('name') === FORM_ACTION_FIELD;
+  if (!injected) return;
+  if (el.getAttribute('name') === FORM_ACTION_FIELD) el.removeAttribute('name');
+  el.removeAttribute('value');
+  submitterActionBindings.delete(el);
+}
+
+/**
+ * Find an enclosing form even while a nested template is still detached.
+ * `Element.closest()` does not consistently cross a DocumentFragment boundary.
+ * @param {Element} el
+ * @returns {HTMLFormElement | null}
+ */
+function enclosingForm(el) {
+  let node = el.parentNode;
+  while (node) {
+    if (node.nodeType === 1 && /** @type {Element} */ (node).localName === 'form') {
+      return /** @type {HTMLFormElement} */ (node);
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
+
 /**
  * Reconcile a submitter button (`<button formaction=${action}>`).
  * @param {Element} el
@@ -643,17 +690,25 @@ function reconcileSubmitterAction(el, value, rec) {
   const id = typeof value === 'function' ? formActionId(value) : null;
   if (!id) {
     if (typeof value === 'function') assertIdentifiableAction(null, el.localName);
+    releaseSubmitterAction(el);
     return;
   }
-  const form = el.closest('form');
-  const isFormBound = !!(form && (form.querySelector(`input[name="${FORM_ACTION_FIELD}"]`) || form.hasAttribute('data-webjs-bound')));
+  assertSingleSubmitterAction(rec.duplicateAction, el.localName);
+  if (rec.staticAction) assertSubmitterHasNoStaticFormAction(el.localName);
+  if (rec.authoredValue) assertSubmitterHasNoValue(el.localName);
+  if (rec.authoredName || rec.authoredForm) {
+    if (rec.authoredName) assertSubmitterHasNoName(el.getAttribute('name') || '', el.localName, false);
+    if (rec.authoredForm) assertSubmitterHasNoFormAttribute(el.localName);
+  }
+  const form = enclosingForm(el);
+  const isFormBound = !!(form && (form.querySelector(`input[name="${FORM_ACTION_FIELD}"]`)
+    || formActionCandidates.has(form) || form.hasAttribute('data-webjs-bound')));
   assertSubmitterFormIsBound(isFormBound, el.localName);
   if (el.hasAttribute('name') || rec.hasNamePart) {
     assertSubmitterHasNoName(el.getAttribute('name') || '', el.localName);
   }
-  if (el.localName === 'input' && el.getAttribute('type') === 'image') {
-    assertSubmitterNotImage(el.localName);
-  }
+  assertSubmitterType(el.localName, el.getAttribute('type'));
+  if (el.hasAttribute('form')) assertSubmitterHasNoFormAttribute(el.localName);
   const formEnctype = el.getAttribute('formenctype');
   if (formEnctype != null && !PARSEABLE_ENCTYPES.has(formEnctype.toLowerCase())) {
     throw new Error(
@@ -672,6 +727,7 @@ function reconcileSubmitterAction(el, value, rec) {
   el.removeAttribute('formaction');
   el.setAttribute('name', FORM_ACTION_FIELD);
   el.setAttribute('value', id);
+  submitterActionBindings.set(el, id);
 };
 
 /* ================================================================
@@ -903,6 +959,11 @@ function applyPart(part, value, _prev, allValues) {
       applyChild(part, value);
       break;
     case 'attr': {
+      if (part.el.localName === 'form' && part.name.toLowerCase() === 'action') {
+        const candidate = resolveHoleValue(value);
+        if (typeof candidate === 'function') formActionCandidates.set(part.el, candidate);
+        else formActionCandidates.delete(part.el);
+      }
       if (value == null || value === false) part.el.removeAttribute(part.name);
       else if (isBoundFormAction(value, part.name, part.el.localName)) {
         // #1155: the ONE supported form-action binding, applied to the live
@@ -1372,9 +1433,14 @@ function applyChildInnerRaw(part, value) {
       applyPart(bound[i], tr.values[i], undefined, tr.values);
       lastValues.push(tr.values[i]);
     }
-    reconcileFormActions(formActions, bound, tr.values);
     const nodes = [startNode, ...frag.childNodes, endNode];
     marker.parentNode?.insertBefore(nodesToFrag(nodes), marker);
+    try {
+      reconcileFormActions(formActions, bound, tr.values);
+    } catch (error) {
+      for (const node of nodes) node.remove();
+      throw error;
+    }
     // Slot parts in this nested template need their one-shot apply just
     // like createInstance does for top-level templates. The slot is now
     // in the live tree (insertBefore above) so its parent walk can
diff --git a/packages/core/src/render-server.js b/packages/core/src/render-server.js
index ee96cd5f4..3944f4bbd 100644
--- a/packages/core/src/render-server.js
+++ b/packages/core/src/render-server.js
@@ -4,8 +4,11 @@ import { escapeText, escapeAttr } from './escape.js';
 import {
   assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
   assertIdentifiableAction, bindFormActionStartTag, isBoundFormAction, resolveFormActionId,
-  assertConvergentBoundForm, assertSubmitterHasNoName, assertSubmitterNotImage,
-  assertSubmitterFormIsBound, parseStartTagAttrs, FORM_ACTION_FIELD, PARSEABLE_ENCTYPES,
+  assertConvergentBoundForm, assertSubmitterHasNoName,
+  assertSubmitterFormIsBound, assertSubmitterType, assertSubmitterHasNoValue,
+  assertSubmitterHasNoStaticFormAction, assertSubmitterHasNoFormAttribute,
+  assertSingleSubmitterAction, parseStartTagAttrs, countStartTagAttr,
+  FORM_ACTION_FIELD, PARSEABLE_ENCTYPES,
 } from './form-action.js';
 import { lookup, lookupModuleUrl, allTags } from './registry.js';
 import { stylesToString, isCSS } from './css.js';
@@ -29,7 +32,7 @@ import { cspNonce } from './csp-nonce.js';
  * Suspense still works but we fall back to emitting only the fallback
  * (the promise is dropped: appropriate for static pre-render).
  *
- * @typedef {{ pending: {id: string, promise: Promise<unknown>}[], nextId: number }} SuspenseCtx
+ * @typedef {{ pending: {id: string, promise: Promise<unknown>, insideBoundForm?: boolean}[], nextId: number }} SuspenseCtx
  *
  * @param {unknown} value
  * @param {{ ssr?: boolean, suspenseCtx?: SuspenseCtx }} [opts]
@@ -50,13 +53,14 @@ export async function renderToString(value, opts = { ssr: true }) {
 /**
  * @param {unknown} value
  * @param {SuspenseCtx} [ctx]
+ * @param {boolean} [insideBoundForm]
  * @returns {Promise<string>}
  */
-async function render(value, ctx) {
+async function render(value, ctx, insideBoundForm = false) {
   if (value == null || value === false || value === true) return '';
   if (value && typeof /** @type any */ (value).then === 'function') {
     value = await value;
-    return render(value, ctx);
+    return render(value, ctx, insideBoundForm);
   }
   // unsafeHTML: inject raw HTML string without escaping.
   if (isUnsafeHTML(value)) {
@@ -64,21 +68,21 @@ async function render(value, ctx) {
   }
   // live() on the server just unwraps and renders the inner value.
   if (isLive(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, insideBoundForm);
   }
   // watch() on the server reads the signal once and inlines the
   // result. Subscription is a client-only concern; the SSR HTML
   // freezes a snapshot of the current value.
   if (isWatch(value)) {
-    return render(/** @type any */ (value).signal.get(), ctx);
+    return render(/** @type any */ (value).signal.get(), ctx, insideBoundForm);
   }
   // keyed() on the server: render the wrapped template; key is client-only.
   if (isKeyed(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, insideBoundForm);
   }
   // guard() on the server: always invoke the value function (no cache on SSR).
   if (isGuard(value)) {
-    return render(/** @type any */ (value).fn(), ctx);
+    return render(/** @type any */ (value).fn(), ctx, insideBoundForm);
   }
   // templateContent() on the server: emit the template's innerHTML verbatim.
   if (isTemplateContent(value)) {
@@ -91,7 +95,7 @@ async function render(value, ctx) {
   }
   // cache() on the server: pass-through to the inner value.
   if (isCache(value)) {
-    return render(/** @type any */ (value).value, ctx);
+    return render(/** @type any */ (value).value, ctx, insideBoundForm);
   }
   // until() on the server: render the first synchronous candidate, or
   // await the first Promise to settle when all candidates are Promises.
@@ -101,13 +105,13 @@ async function render(value, ctx) {
     const args = /** @type any */ (value).args;
     for (const a of args) {
       if (!a || typeof (/** @type any */ (a).then) !== 'function') {
-        return render(a, ctx);
+        return render(a, ctx, insideBoundForm);
       }
     }
     if (args.length > 0) {
       try {
         const winner = await Promise.race(args.map((p) => Promise.resolve(p).catch(() => undefined)));
-        return render(winner, ctx);
+        return render(winner, ctx, insideBoundForm);
       } catch {
         return '';
       }
@@ -120,34 +124,35 @@ async function render(value, ctx) {
     return '';
   }
   if (Array.isArray(value)) {
-    const parts = await Promise.all(value.map((v) => render(v, ctx)));
+    const parts = await Promise.all(value.map((v) => render(v, ctx, insideBoundForm)));
     return parts.join('');
   }
   if (isRepeat(value)) {
     const r = /** @type any */ (value);
-    const parts = await Promise.all(r.items.map((it, i) => render(r.templateFn(it, i), ctx)));
+    const parts = await Promise.all(r.items.map((it, i) => render(r.templateFn(it, i), ctx, insideBoundForm)));
     return parts.join('');
   }
   if (isSuspense(value)) {
     const s = /** @type any */ (value);
-    const fallback = await render(s.fallback, ctx);
+    const fallback = await render(s.fallback, ctx, insideBoundForm);
     if (ctx) {
       const id = `s${ctx.nextId++}`;
-      ctx.pending.push({ id, promise: Promise.resolve(s.children) });
+      ctx.pending.push({ id, promise: Promise.resolve(s.children), insideBoundForm });
       return `<webjs-boundary id="${id}">${fallback}</webjs-boundary>`;
     }
     return fallback;
   }
-  if (isTemplate(value)) return renderTemplate(/** @type any */ (value), ctx);
+  if (isTemplate(value)) return renderTemplate(/** @type any */ (value), ctx, insideBoundForm);
   return escapeText(String(value));
 }
 
 /**
  * @param {import('./html.js').TemplateResult} tr
  * @param {SuspenseCtx} [ctx]
+ * @param {boolean} [insideBoundFormAtStart]
  * @returns {Promise<string>}
  */
-async function renderTemplate(tr, ctx) {
+async function renderTemplate(tr, ctx, insideBoundFormAtStart = false) {
   const { strings, values } = tr;
   let out = '';
   let state = 'text';
@@ -165,7 +170,7 @@ async function renderTemplate(tr, ctx) {
   let pendingActionCount = 0;
   /** @type {string[]} */
   let pendingPropAttrs = [];
-  let insideBoundForm = false;
+  let insideBoundForm = insideBoundFormAtStart;
   let isCloseTag = false;
 
   const closeBoundFormTag = () => {
@@ -185,12 +190,14 @@ async function renderTemplate(tr, ctx) {
       pendingSubmitterTag = null;
       const tagStr = out.slice(tagStart);
       const attrs = parseStartTagAttrs(tagStr);
+      assertSingleSubmitterAction(duplicateAction, tag);
+      if (attrs.has('formaction')) assertSubmitterHasNoStaticFormAction(tag);
+      if (countStartTagAttr(tagStr, 'value') > 1) assertSubmitterHasNoValue(tag);
       if (attrs.has('name')) {
-        assertSubmitterHasNoName(attrs.get('name') || '', tag);
-      }
-      if (tag === 'input' && attrs.get('type') === 'image') {
-        assertSubmitterNotImage(tag);
+        assertSubmitterHasNoName(attrs.get('name') || '', tag, countStartTagAttr(tagStr, 'name') === 1);
       }
+      assertSubmitterType(tag, attrs.get('type'));
+      if (attrs.has('form')) assertSubmitterHasNoFormAttribute(tag);
       const formEnctype = attrs.get('formenctype');
       if (formEnctype != null && !PARSEABLE_ENCTYPES.has(formEnctype.toLowerCase())) {
         throw new Error(
@@ -220,7 +227,10 @@ async function renderTemplate(tr, ctx) {
     if (n === 'method' || n === 'enctype') pendingPropAttrs.push(String(name));
   };
   const noteActionHole = (name, tag) => {
-    if (String(tag).toLowerCase() === 'form' && String(name).toLowerCase() === 'action') {
+    const t = String(tag).toLowerCase();
+    const n = String(name).toLowerCase();
+    if ((t === 'form' && n === 'action') ||
+        ((t === 'button' || t === 'input') && n === 'formaction')) {
       pendingActionCount += 1;
     }
   };
@@ -328,7 +338,7 @@ async function renderTemplate(tr, ctx) {
         out += String(val ?? '');
         rawTail = '';
       } else if (state === 'text') {
-        out += await render(val, ctx);
+        out += await render(val, ctx, insideBoundForm);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
@@ -340,7 +350,7 @@ async function renderTemplate(tr, ctx) {
         } else if (kind === 'prop') {
           out = out.slice(0, attrStart);
           if (currentTag === 'webjs-suspense' && name === 'fallback') {
-            const fbHtml = await render(val, ctx);
+            const fbHtml = await render(val, ctx, insideBoundForm);
             out += `data-webjs-fallback="${escapeAttr(fbHtml)}"`;
             state = 'in-tag';
             attrName = '';
@@ -386,11 +396,14 @@ async function renderTemplate(tr, ctx) {
             const tagStr = out.slice(tagStart);
             const attrs = parseStartTagAttrs(tagStr);
             if (attrs.has('name')) {
-              assertSubmitterHasNoName(attrs.get('name') || '', currentTag);
+              const frameworkName = pendingSubmitterTag != null
+                && attrs.get('name') === FORM_ACTION_FIELD;
+              assertSubmitterHasNoName(attrs.get('name') || '', currentTag, frameworkName);
             }
-            if (currentTag === 'input' && attrs.get('type') === 'image') {
-              assertSubmitterNotImage(currentTag);
+            if (attrs.has('value') && pendingSubmitterTag == null) {
+              assertSubmitterHasNoValue(currentTag);
             }
+            if (attrs.has('form')) assertSubmitterHasNoFormAttribute(currentTag);
             const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
             pendingSubmitterTag = currentTag;
             out = out.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
@@ -1713,7 +1726,7 @@ export function renderToStream(value, opts = { ssr: true }) {
       try {
         if (opts && opts.ssr === false) {
           // No DSD injection: just stream the raw rendered chunks.
-          await streamRender(value, ctx, controller);
+          await streamRender(value, ctx, controller, false);
         } else {
           // Render to string first to run DSD injection (which operates on
           // the full HTML), then enqueue the result. This matches the
@@ -1742,28 +1755,29 @@ export function renderToStream(value, opts = { ssr: true }) {
  * @param {unknown} value
  * @param {SuspenseCtx} [ctx]
  * @param {ReadableStreamDefaultController<string>} controller
+ * @param {boolean} [insideBoundForm]
  */
-async function streamRender(value, ctx, controller) {
+async function streamRender(value, ctx, controller, insideBoundForm = false) {
   if (value == null || value === false || value === true) return;
   if (value && typeof /** @type any */ (value).then === 'function') {
     value = await value;
-    return streamRender(value, ctx, controller);
+    return streamRender(value, ctx, controller, insideBoundForm);
   }
   if (isUnsafeHTML(value)) {
     controller.enqueue(String(/** @type any */ (value).value ?? ''));
     return;
   }
   if (isLive(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, insideBoundForm);
   }
   if (isWatch(value)) {
-    return streamRender(/** @type any */ (value).signal.get(), ctx, controller);
+    return streamRender(/** @type any */ (value).signal.get(), ctx, controller, insideBoundForm);
   }
   if (isKeyed(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, insideBoundForm);
   }
   if (isGuard(value)) {
-    return streamRender(/** @type any */ (value).fn(), ctx, controller);
+    return streamRender(/** @type any */ (value).fn(), ctx, controller, insideBoundForm);
   }
   if (isTemplateContent(value)) {
     const tpl = /** @type any */ (value).template;
@@ -1774,19 +1788,19 @@ async function streamRender(value, ctx, controller) {
     return;
   }
   if (isCache(value)) {
-    return streamRender(/** @type any */ (value).value, ctx, controller);
+    return streamRender(/** @type any */ (value).value, ctx, controller, insideBoundForm);
   }
   if (isUntil(value)) {
     const args = /** @type any */ (value).args;
     for (const a of args) {
       if (!a || typeof (/** @type any */ (a).then) !== 'function') {
-        return streamRender(a, ctx, controller);
+        return streamRender(a, ctx, controller, insideBoundForm);
       }
     }
     if (args.length > 0) {
       try {
         const winner = await Promise.race(args.map((p) => Promise.resolve(p).catch(() => undefined)));
-        return streamRender(winner, ctx, controller);
+        return streamRender(winner, ctx, controller, insideBoundForm);
       } catch {
         return;
       }
@@ -1797,13 +1811,13 @@ async function streamRender(value, ctx, controller) {
     return;
   }
   if (Array.isArray(value)) {
-    for (const v of value) await streamRender(v, ctx, controller);
+    for (const v of value) await streamRender(v, ctx, controller, insideBoundForm);
     return;
   }
   if (isRepeat(value)) {
     const r = /** @type any */ (value);
     for (let i = 0; i < r.items.length; i++) {
-      await streamRender(r.templateFn(r.items[i], i), ctx, controller);
+      await streamRender(r.templateFn(r.items[i], i), ctx, controller, insideBoundForm);
     }
     return;
   }
@@ -1812,16 +1826,16 @@ async function streamRender(value, ctx, controller) {
     if (ctx) {
       const id = `s${ctx.nextId++}`;
       controller.enqueue(`<webjs-boundary id="${id}">`);
-      await streamRender(s.fallback, ctx, controller);
+      await streamRender(s.fallback, ctx, controller, insideBoundForm);
       controller.enqueue(`</webjs-boundary>`);
-      ctx.pending.push({ id, promise: Promise.resolve(s.children) });
+      ctx.pending.push({ id, promise: Promise.resolve(s.children), insideBoundForm });
     } else {
-      await streamRender(s.fallback, ctx, controller);
+      await streamRender(s.fallback, ctx, controller, insideBoundForm);
     }
     return;
   }
   if (isTemplate(value)) {
-    await streamTemplate(/** @type any */ (value), ctx, controller);
+    await streamTemplate(/** @type any */ (value), ctx, controller, insideBoundForm);
     return;
   }
   controller.enqueue(escapeText(String(value)));
@@ -1834,8 +1848,9 @@ async function streamRender(value, ctx, controller) {
  * @param {import('./html.js').TemplateResult} tr
  * @param {SuspenseCtx} [ctx]
  * @param {ReadableStreamDefaultController<string>} controller
+ * @param {boolean} [insideBoundFormAtStart]
  */
-async function streamTemplate(tr, ctx, controller) {
+async function streamTemplate(tr, ctx, controller, insideBoundFormAtStart = false) {
   const { strings, values } = tr;
   let state = 'text';
   let attrName = '';
@@ -1857,7 +1872,7 @@ async function streamTemplate(tr, ctx, controller) {
   let pendingPropAttrs = [];
   /** @type {string | null} */
   let pendingSubmitterTag = null;
-  let insideBoundForm = false;
+  let insideBoundForm = insideBoundFormAtStart;
   let isCloseTag = false;
 
   const closeBoundFormTag = () => {
@@ -1877,12 +1892,14 @@ async function streamTemplate(tr, ctx, controller) {
       pendingSubmitterTag = null;
       const tagStr = buf.slice(tagStart);
       const attrs = parseStartTagAttrs(tagStr);
+      assertSingleSubmitterAction(duplicateAction, tag);
+      if (attrs.has('formaction')) assertSubmitterHasNoStaticFormAction(tag);
+      if (countStartTagAttr(tagStr, 'value') > 1) assertSubmitterHasNoValue(tag);
       if (attrs.has('name')) {
-        assertSubmitterHasNoName(attrs.get('name') || '', tag);
-      }
-      if (tag === 'input' && attrs.get('type') === 'image') {
-        assertSubmitterNotImage(tag);
+        assertSubmitterHasNoName(attrs.get('name') || '', tag, countStartTagAttr(tagStr, 'name') === 1);
       }
+      assertSubmitterType(tag, attrs.get('type'));
+      if (attrs.has('form')) assertSubmitterHasNoFormAttribute(tag);
       const formEnctype = attrs.get('formenctype');
       if (formEnctype != null && !PARSEABLE_ENCTYPES.has(formEnctype.toLowerCase())) {
         throw new Error(
@@ -1912,7 +1929,10 @@ async function streamTemplate(tr, ctx, controller) {
     if (n === 'method' || n === 'enctype') pendingPropAttrs.push(String(name));
   };
   const noteActionHole = (name, tag) => {
-    if (String(tag).toLowerCase() === 'form' && String(name).toLowerCase() === 'action') {
+    const t = String(tag).toLowerCase();
+    const n = String(name).toLowerCase();
+    if ((t === 'form' && n === 'action') ||
+        ((t === 'button' || t === 'input') && n === 'formaction')) {
       pendingActionCount += 1;
     }
   };
@@ -2020,7 +2040,8 @@ async function streamTemplate(tr, ctx, controller) {
         buf += String(val ?? '');
         rawTail = '';
       } else if (state === 'text') {
-        buf += await render(val, ctx);
+        if (buf) { controller.enqueue(buf); buf = ''; }
+        await streamRender(val, ctx, controller, insideBoundForm);
       } else if (state === 'after-eq') {
         const prefix = attrName[0];
         const name = attrName.slice(1);
@@ -2060,11 +2081,14 @@ async function streamTemplate(tr, ctx, controller) {
             const tagStr = buf.slice(tagStart);
             const attrs = parseStartTagAttrs(tagStr);
             if (attrs.has('name')) {
-              assertSubmitterHasNoName(attrs.get('name') || '', currentTag);
+              const frameworkName = pendingSubmitterTag != null
+                && attrs.get('name') === FORM_ACTION_FIELD;
+              assertSubmitterHasNoName(attrs.get('name') || '', currentTag, frameworkName);
             }
-            if (currentTag === 'input' && attrs.get('type') === 'image') {
-              assertSubmitterNotImage(currentTag);
+            if (attrs.has('value') && pendingSubmitterTag == null) {
+              assertSubmitterHasNoValue(currentTag);
             }
+            if (attrs.has('form')) assertSubmitterHasNoFormAttribute(currentTag);
             const subId = assertIdentifiableAction(await resolveFormActionId(val), currentTag);
             pendingSubmitterTag = currentTag;
             buf = buf.slice(0, attrStart) + `name="${FORM_ACTION_FIELD}" value="${escapeAttr(subId)}"`;
@@ -2111,10 +2135,10 @@ async function streamSuspenseBoundaries(ctx, controller, dev) {
   while (ctx.pending.length) {
     const batch = ctx.pending.splice(0);
     await Promise.all(
-      batch.map(async ({ id, promise }) => {
+      batch.map(async ({ id, promise, insideBoundForm }) => {
         try {
           const resolved = await promise;
-          const html = await render(resolved, ctx);
+          const html = await render(resolved, ctx, insideBoundForm);
           const full = await injectDSD(html, ctx, [], dev);
           controller.enqueue(
             `<template data-webjs-resolve="${id}">${full}</template>` +
diff --git a/packages/core/test/rendering/form-action-binding-client.test.js b/packages/core/test/rendering/form-action-binding-client.test.js
index 3ade63fec..65a2fd5c6 100644
--- a/packages/core/test/rendering/form-action-binding-client.test.js
+++ b/packages/core/test/rendering/form-action-binding-client.test.js
@@ -520,6 +520,53 @@ test('submitter non-POST formmethod is refused on the client (get and PATCH)', (
     /formmethod="PATCH"/,
   );
 });
+
+test('submitter controls and conflicting attributes are refused on the client', () => {
+  const action = HOISTED();
+  for (const tpl of [
+    html`<form action=${action}><input type="text" formaction=${action}></form>`,
+    html`<form action=${action}><input type="hidden" formaction=${action}></form>`,
+    html`<form action=${action}><input type="IMAGE" formaction=${action}></form>`,
+    html`<form action=${action}><button type="button" formaction=${action}>Save</button></form>`,
+    html`<form action=${action}><button value="save" formaction=${action}>Save</button></form>`,
+    html`<form action=${action}><button formaction="/legacy" formaction=${action}>Save</button></form>`,
+    html`<form action=${action}><button form="other" formaction=${action}>Save</button></form>`,
+  ]) {
+    assert.throws(() => render(tpl, document.createElement('div')), /submitter|value|formaction|form.*attribute/);
+  }
+});
+
+test('duplicate formaction holes on one submitter are refused on the client', () => {
+  const action = HOISTED();
+  assert.throws(
+    () => render(
+      html`<form action=${action}><button formaction=${action} formaction=${action}>Save</button></form>`,
+      document.createElement('div'),
+    ),
+    /two formaction=/,
+  );
+});
+
+test('a submitter in a nested template sees its enclosing form binding', () => {
+  const formAction = HOISTED();
+  const buttonAction = HOISTED();
+  const host = document.createElement('div');
+  render(html`<form action=${formAction}>${html`<button formaction=${buttonAction}>Save</button>`}</form>`, host);
+  assert.equal(host.querySelector('button').getAttribute('value'), ID);
+  assert.equal(host.querySelector('button').getAttribute('name'), '__webjs_action');
+});
+
+test('releasing a submitter binding removes its stale identity', () => {
+  const formAction = HOISTED();
+  const buttonAction = HOISTED();
+  const host = document.createElement('div');
+  const tpl = (action) => html`<form action=${formAction}><button formaction=${action}>Save</button></form>`;
+  render(tpl(buttonAction), host);
+  render(tpl(null), host);
+  const button = host.querySelector('button');
+  assert.equal(button.hasAttribute('name'), false);
+  assert.equal(button.hasAttribute('value'), false);
+});
 // NOTE: the release path's other guard, "an unbound form keeps a `.method` the
 // template writes as a PROPERTY", is asserted in `browser/form-action-guard.test.js`
 // instead. It turns entirely on the write reflecting to the content attribute,
diff --git a/packages/core/test/rendering/form-action-binding.test.js b/packages/core/test/rendering/form-action-binding.test.js
index 0fa1048da..d6a1b9ac5 100644
--- a/packages/core/test/rendering/form-action-binding.test.js
+++ b/packages/core/test/rendering/form-action-binding.test.js
@@ -379,6 +379,50 @@ test('formaction=${fn} submitter refusals: name attribute, input type=image, unp
   );
 });
 
+test('formaction submitters require an actual submit control', async () => {
+  withResolver();
+  for (const tpl of [
+    html`<form action=${submitFeedback}><input type="text" formaction=${submitFeedback}></form>`,
+    html`<form action=${submitFeedback}><input type="hidden" formaction=${submitFeedback}></form>`,
+    html`<form action=${submitFeedback}><input type="IMAGE" formaction=${submitFeedback}></form>`,
+    html`<form action=${submitFeedback}><button type="button" formaction=${submitFeedback}>Save</button></form>`,
+    html`<form action=${submitFeedback}><button type="reset" formaction=${submitFeedback}>Save</button></form>`,
+  ]) {
+    await assert.rejects(() => renderToString(tpl, { ssr: true }), /submitter control|type="image"/);
+  }
+});
+
+test('formaction submitters refuse conflicting author attributes', async () => {
+  withResolver();
+  for (const tpl of [
+    html`<form action=${submitFeedback}><button value="delete" formaction=${submitFeedback}>Delete</button></form>`,
+    html`<form action=${submitFeedback}><button formaction=${submitFeedback} value="delete">Delete</button></form>`,
+    html`<form action=${submitFeedback}><button formaction="/legacy" formaction=${submitFeedback}>Delete</button></form>`,
+    html`<form action=${submitFeedback}><button formaction=${submitFeedback} formaction="/legacy">Delete</button></form>`,
+    html`<form action=${submitFeedback}><button form="other" formaction=${submitFeedback}>Delete</button></form>`,
+  ]) {
+    await assert.rejects(() => renderToString(tpl, { ssr: true }), /value|formaction|form.*attribute/);
+  }
+});
+
+test('duplicate formaction holes on one submitter are refused', async () => {
+  withResolver();
+  await assert.rejects(
+    () => renderToString(
+      html`<form action=${submitFeedback}><button formaction=${submitFeedback} formaction=${submitFeedback}>Delete</button></form>`,
+      { ssr: true },
+    ),
+    /two formaction=/,
+  );
+});
+
+test('formaction submitters work when rendered by a nested template', async () => {
+  withResolver();
+  const buttons = () => html`<button formaction=${submitFeedback}>Delete</button>`;
+  const out = await renderToString(html`<form action=${submitFeedback}>${buttons()}</form>`, { ssr: true });
+  assert.match(out, /<button name="__webjs_action" value="[0-9a-f]{10}\/submitFeedback">Delete<\/button>/);
+});
+
 test('two action holes are refused whichever position the bound one is in', async () => {
   // The refusal is by HOLE COUNT once any hole resolves to an action, so a
   // template that writes the url first and the action second refuses too.
diff --git a/packages/core/test/rendering/render-server-streaming.test.js b/packages/core/test/rendering/render-server-streaming.test.js
index e91f107a1..89c652cce 100644
--- a/packages/core/test/rendering/render-server-streaming.test.js
+++ b/packages/core/test/rendering/render-server-streaming.test.js
@@ -109,6 +109,26 @@ test('renderToStream: basic template produces a readable stream', async () => {
   assert.match(out, /<p>stream<\/p>/);
 });
 
+test('renderToStream: ssr:false preserves progressive text-hole chunks', async () => {
+  const later = new Promise((resolve) => setTimeout(() => resolve('later'), 25));
+  const stream = renderToStream(
+    html`<p>first</p>${Promise.resolve('now')}<p>${later}</p>`,
+    { ssr: false },
+  );
+  const reader = stream.getReader();
+  const first = await reader.read();
+  assert.equal(first.done, false);
+  assert.match(first.value, /first/);
+  assert.doesNotMatch(first.value, /later/);
+  const rest = [];
+  for (;;) {
+    const next = await reader.read();
+    if (next.done) break;
+    rest.push(next.value);
+  }
+  assert.match(rest.join(''), /later/);
+});
+
 test('renderToStream: ssr:true path runs DSD injection and enqueues full HTML', async () => {
   const stream = renderToStream(html`<p>ssr</p>`);
   const out = await streamText(stream);
diff --git a/test/bun/form-action-submitter-parity.test.mjs b/test/bun/form-action-submitter-parity.test.mjs
index d1d74f8e4..31ccb460e 100644
--- a/test/bun/form-action-submitter-parity.test.mjs
+++ b/test/bun/form-action-submitter-parity.test.mjs
@@ -42,3 +42,24 @@ test('SSR: formaction=${fn} on submitter with name attribute throws refusal', as
     /already carries a "name" attribute/,
   );
 });
+
+test('SSR: submitter guards stay identical for Bun and Node', async () => {
+  const refused = [
+    ['text input', html`<form action=${saveAction}><input type="text" formaction=${deleteAction}></form>`],
+    ['hidden input', html`<form action=${saveAction}><input type="hidden" formaction=${deleteAction}></form>`],
+    ['image input', html`<form action=${saveAction}><input type="IMAGE" formaction=${deleteAction}></form>`],
+    ['button input', html`<form action=${saveAction}><button type="button" formaction=${deleteAction}>Delete</button></form>`],
+    ['value attribute', html`<form action=${saveAction}><button value="delete" formaction=${deleteAction}>Delete</button></form>`],
+    ['static formaction', html`<form action=${saveAction}><button formaction="/legacy" formaction=${deleteAction}>Delete</button></form>`],
+    ['form attribute', html`<form action=${saveAction}><button form="other" formaction=${deleteAction}>Delete</button></form>`],
+  ];
+  for (const [label, tpl] of refused) {
+    await assert.rejects(() => renderToString(tpl, { ssr: true }), /submitter|value|formaction|form.*attribute/, label);
+  }
+});
+
+test('SSR: nested submitter templates keep the enclosing form binding', async () => {
+  const buttons = () => html`<button formaction=${deleteAction}>Delete</button>`;
+  const out = await renderToString(html`<form action=${saveAction}>${buttons()}</form>`, { ssr: true });
+  assert.match(out, /name="__webjs_action" value="hash\/deleteAction"/);
+});

From 99fdcd379549aae994d6562b6895cf7553500850 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Sun, 2 Aug 2026 02:11:46 +0530
Subject: [PATCH 8/8] docs: document submitter action constraints

---
 .agents/skills/webjs/SKILL.md                            | 2 +-
 .agents/skills/webjs/references/muscle-memory-gotchas.md | 6 +++---
 .agents/skills/webjs/references/routing-and-pages.md     | 2 +-
 AGENTS.md                                                | 4 ++--
 website/app/docs/progressive-enhancement/page.ts         | 2 +-
 website/app/docs/server-actions/page.ts                  | 2 +-
 website/app/docs/ssr/page.ts                             | 2 +-
 website/app/docs/troubleshooting/page.ts                 | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/.agents/skills/webjs/SKILL.md b/.agents/skills/webjs/SKILL.md
index 66d82b1ed..e98351fe9 100644
--- a/.agents/skills/webjs/SKILL.md
+++ b/.agents/skills/webjs/SKILL.md
@@ -105,7 +105,7 @@ App-internal imports use the `#` root alias (`import { db } from '#db/connection
 9. No backtick characters inside an `html\`...\`` body, even in comments (it closes the literal and 500s).
 10. TypeScript must be erasable (`erasableSyntaxOnly: true`): no `enum`, no value `namespace`, no constructor parameter properties, no legacy decorators.
 11. Reactive properties are declared ONLY through the base-class factory `extends WebComponent({ count: Number })`. Never a `static properties` block, never a class-field initializer (it clobbers the reactive accessor).
-12. A form that writes binds its action: `<form action=${importedAction}>`. A quoted `action="${fn}"`, a `formaction=${fn}`, `action=${fn}` off a `<form>`, a bound form with `method="get"`, and a non-action function all throw. A page has no `action` export, so a bare `<form method="post">` is a 405.
+12. A form that writes binds its action: `<form action=${importedAction}>`, or a submitter `<button formaction=${importedAction}>` / `<input type="submit" formaction=${importedAction}>` inside a bound form. Quoted bindings, non-submit controls, submitter `name` / `value` / `form` / static `formaction` attributes, `action=${fn}` off a `<form>`, a bound form with `method="get"`, and a non-action function all throw. A page has no `action` export, so a bare `<form method="post">` is a 405.
 
 ## Export Map
 
diff --git a/.agents/skills/webjs/references/muscle-memory-gotchas.md b/.agents/skills/webjs/references/muscle-memory-gotchas.md
index a06526679..25828cda7 100644
--- a/.agents/skills/webjs/references/muscle-memory-gotchas.md
+++ b/.agents/skills/webjs/references/muscle-memory-gotchas.md
@@ -52,7 +52,7 @@ import { submitFeedback } from '#modules/feedback/actions/submit-feedback.server
 html`<form action=${submitFeedback}><input name="email"></form>`;
 ```
 
-That is the whole wiring. The renderer omits the `action` attribute (so the form posts to the page's own url), supplies `method="post"` and an enctype, and emits the identity field. Writing `method="get"` on a bound form throws, because a GET form sends no body and the action could never run.
+That is the whole wiring. The renderer omits the `action` attribute (so the form posts to the page's own url), supplies `method="post"` and an enctype, and emits the identity field. Writing `method="get"` on a bound form throws, because a GET form sends no body and the action could never run. A submitter binding is limited to `<button>` submitters and `<input type="submit">` controls inside that bound form.
 
 **Only the bare, unquoted `action=${fn}` on a `<form>` binds.** Every near-miss is a hard render error rather than a silently-inert form, and the reason is a source leak. During SSR a `.server.ts` import is the ACTUAL function (the RPC stub exists only in the browser), and `action=` is an ordinary attribute hole, so stringifying it would write the function's body into the HTML every visitor downloads, including any literal inside it. The renderer throws instead, on the server and on the client, for `action=` and `formaction=` alike.
 
@@ -70,7 +70,7 @@ Do not go looking for the rule that decides when it folds. Export status, read c
 
 So treat everything reachable from the action as exposed. That is the assumption the refusal is built on, it is the only one that holds across runtimes, and it is the only one that stays true when the transpiler changes.
 
-The refusal covers the shape, not one spelling of it. A quoted `action="${fn}"` and the mixed `action="/x/${fn}"` are refused, because quoting turns a binding hole back into a plain attribute; so is a function wrapped in an array (`action=${[fn]}`), since an array stringifies each element through `String()` and leaks identically. `formaction=` is refused everywhere. Attribute names fold case, so `ACTION=${fn}` on a `<form>` BINDS like the lowercase spelling, while `formAction=${fn}` on a button is refused like `formaction=`.
+The refusal covers the shape, not one spelling of it. A quoted `action="${fn}"` and the mixed `action="/x/${fn}"` are refused, because quoting turns a binding hole back into a plain attribute; so is a function wrapped in an array (`action=${[fn]}`), since an array stringifies each element through `String()` and leaks identically. Unsupported `formaction=` shapes are refused, including non-submit controls, duplicate holes, and submitters carrying `name`, `value`, `form`, or static `formaction` attributes. Attribute names fold case, so `ACTION=${fn}` on a `<form>` BINDS like the lowercase spelling, while quoted or otherwise unsupported `formAction=${fn}` shapes are refused.
 
 **Commenting the form out does not disable the hole.** A comment is HTML, the interpolation is JavaScript, and the renderer emits a comment's holes raw, so a hole inside `<!-- ... -->` never reaches the binding branch and is stringified instead: `<!-- <form action=${createTodo}> -->` ships the whole action body with no throw and no log. Commenting out a WORKING binding is therefore not a way to disable it, it is a way to turn it into a leak. Delete the form or move it out of the template. This is the one shape in this section that leaks silently, which is exactly why it is worth knowing.
 
@@ -83,7 +83,7 @@ The bound, refused, and allowed shapes in full. Every "no" row is a binding that
 | `action=${fn}` unquoted, on a `<form>` | **no, it BINDS** | the one supported shape: the identity is resolved and emitted as a hidden field, nothing is stringified |
 | `action=${fn}` on any other tag | yes | `action` submits nothing off a `<form>`, so it is an ordinary attribute and the function would be stringified |
 | `action="${fn}"`, or a mixed `action="/x/${fn}"` | yes | quoting turns a binding hole back into a plain attribute |
-| `formaction=${fn}` unquoted, on a submitter inside a bound form | **no, it BINDS** | per-submitter server action binding (#1207): emits `<button name="__webjs_action" value="<hash>/<fn>">` and server dispatches to last submitter in DOM order |
+| `formaction=${fn}` unquoted, on a submitter inside a bound form | **no, it BINDS** | per-submitter server action binding (#1207): emits the reserved identity on a `<button>` or `<input type="submit">` and server dispatches to last submitter in DOM order. The submitter cannot carry `name`, `value`, `form`, or static `formaction` attributes |
 | `formaction=${fn}` on an UNBOUND form | yes | submitter action requires enclosing form to be bound (`<form action=${formAction}>`) so POST method and multipart encoding are set at form start |
 | `.action=` on a native form | yes | the supported binding is the plain attribute, and a `.prop` on a native element drops at SSR, so accepting it would mean a form that submits under JS and does nothing without it |
 | `.method=` / `.enctype=` / `.encoding=` on a BOUND form | yes | the same reason one level over. All three are reflected IDL attributes, so SSR drops the binding and emits `method="post"` while a browser ends at what you assigned. Write them as plain attributes |
diff --git a/.agents/skills/webjs/references/routing-and-pages.md b/.agents/skills/webjs/references/routing-and-pages.md
index 104e75552..cf6c46b62 100644
--- a/.agents/skills/webjs/references/routing-and-pages.md
+++ b/.agents/skills/webjs/references/routing-and-pages.md
@@ -179,7 +179,7 @@ Three responses that are not the happy path:
 
 The submission is Origin-verified (the same `Sec-Fetch-Site` / `Origin` check the RPC endpoint applies), so a no-JS form needs no CSRF token field.
 
-Refusals worth knowing: `formaction=${fn}` on a submit button is refused (write one form per action), a bound form may not declare `method="get"`, and a function bound to `action=` that is not a `'use server'` export throws at render rather than producing a form that posts nowhere. See `muscle-memory-gotchas.md` for the full table.
+Refusals worth knowing: `formaction=${fn}` is supported only on a submit button or `<input type="submit">` inside a bound form, and the submitter may not carry `name`, `value`, `form`, or a static `formaction` attribute. A bound form may not declare `method="get"`, and a function bound to `action=` that is not a `'use server'` export throws at render rather than producing a form that posts nowhere. See `muscle-memory-gotchas.md` for the full table.
 
 ## Error, loading, and 404 boundaries
 
diff --git a/AGENTS.md b/AGENTS.md
index bffbae85d..25e236e97 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -226,7 +226,7 @@ lit-html parity: `repeat` (keyed lists), `unsafeHTML(str)` (trusted raw HTML, **
 
 ### `html` expression prefixes
 
-`<div>${x}</div>` text child; `class=${x}` attribute (escaped); `action=${importedAction}` on a `<form>` or `formaction=${importedAction}` on a `<button>` inside a bound form binds a server action (#1155, #1207: the function-valued attribute holes where the attribute is omitted/rewritten and a `__webjs_action` identity is emitted; a quoted `action="${fn}"` / `formaction="${fn}"` or `action=${fn}` on un-supported tags is a render error, since stringifying a function would leak a server action's source); `@click=${fn}` event listener (client-only, drops at SSR); `.value=${v}` DOM property (round-trips through SSR on custom elements via `data-webjs-prop-*`, drops on native elements); `?disabled=${b}` boolean attribute. Event/property/boolean holes **must be unquoted** (invariant 4). Every hole is identical server and client except `@event` and `.prop` on native elements.
+`<div>${x}</div>` text child; `class=${x}` attribute (escaped); `action=${importedAction}` on a `<form>` or `formaction=${importedAction}` on a submitter inside a bound form binds a server action (#1155, #1207: the function-valued attribute holes where the attribute is omitted/rewritten and a `__webjs_action` identity is emitted; submitters must be actual submit controls and cannot carry their own `name`, `value`, `form`, or static `formaction` attributes; a quoted `action="${fn}"` / `formaction="${fn}"` or `action=${fn}` on un-supported tags is a render error, since stringifying a function would leak a server action's source); `@click=${fn}` event listener (client-only, drops at SSR); `.value=${v}` DOM property (round-trips through SSR on custom elements via `data-webjs-prop-*`, drops on native elements); `?disabled=${b}` boolean attribute. Event/property/boolean holes **must be unquoted** (invariant 4). Every hole is identical server and client except `@event` and `.prop` on native elements.
 
 ---
 
@@ -462,7 +462,7 @@ const result = await optimistic(liked, true, () => likePost(postId));
 
 11. **No em-dashes (U+2014), no hyphen or semicolon used as pause-punctuation in prose, and no colon attached to a code-shaped LHS.** Banned as a pause: U+2014, a space-surrounded hyphen between words, a space-surrounded semicolon between words. Banned colon attachments: a colon-then-prose after `xyz()`, a `<my-tag>`, an `[expr]` subscript, or a `<code>foo()</code>` definition list (rephrase verb-led). Prefer a period, comma, a colon on a plain-noun LHS, parentheses, or a restructure. Plain hyphens stay fine in compound words, flags, filenames, ranges; semicolons and colons stay fine inside code / TS / JSON / CSS. The same hook also enforces brand casing with one simple rule: `WebJs` is a proper noun, so write it capitalized wherever it NAMES the project in prose, at a sentence start AND mid-sentence (`WebJs ships`, `Most WebJs apps`, `the WebJs serializer`). It stays lowercase `webjs` ONLY as a literal code token: a `webjs <subcommand>` CLI command (`webjs dev`, `webjs db migrate`), a `webjs.dev` domain, an `@webjsdev` package, a `"webjs"` config key, a `WEBJS_*` env var, the `webjsdev/webjs` org path, or anything inside a `` `code` `` span or fenced block. If you mean the literal config key or command in prose, wrap it in backticks. Enforced via `.claude/hooks/block-prose-punctuation.sh`, which scans only NEW content (you can still edit an existing line to fix a glyph or casing).
 
-12. **A form that writes binds its action: `<form action=${importedAction}>`, or a submitter button `<button formaction=${importedAction}>` inside a bound form** (#1155, #1207). That is the shape the renderer reads, and every invalid shape throws rather than producing a form that posts nowhere: a quoted `action="${fn}"` / `formaction="${fn}"`, `action=${fn}` on any tag other than `<form>`, a `formaction=${fn}` submitter on an unbound form or carrying its own `name` attribute or on an `<input type="image">`, a bound form or submitter declaring `method="get"` / `formmethod="get"` or an enctype the server cannot parse (`formenctype="text/plain"`), a `.method` / `.enctype` / `.encoding` PROPERTY binding on a bound form, a second `action` hole on one form, a plain `action="/url"` attribute alongside the bound hole, and a function that is not a `'use server'` export. WebJs supplies `method` and `enctype` only where your template supplies neither. Without JS, per-button action binding emits `<button name="__webjs_action" value="<hash>/<fn>">` and server `form-dispatch.js` takes the last `__webjs_action` entry in DOM order (submitter precedence). A page has no `action` export, so a bare `<form method="post">` is a `405`.
+12. **A form that writes binds its action: `<form action=${importedAction}>`, or a submitter `<button formaction=${importedAction}>` / `<input type="submit" formaction=${importedAction}>` inside a bound form** (#1155, #1207). That is the shape the renderer reads, and every invalid shape throws rather than producing a form that posts nowhere: a quoted `action="${fn}"` / `formaction="${fn}"`, `action=${fn}` on any tag other than `<form>`, a `formaction=${fn}` submitter on an unbound form, a non-submit control, a submitter carrying its own `name`, `value`, `form`, or static `formaction`, or an `<input type="image">`, a bound form or submitter declaring `method="get"` / `formmethod="get"` or an enctype the server cannot parse (`formenctype="text/plain"`), a `.method` / `.enctype` / `.encoding` PROPERTY binding on a bound form, a second action hole on one form or submitter, a plain `action="/url"` attribute alongside the bound hole, and a function that is not a `'use server'` export. WebJs supplies `method` and `enctype` only where your template supplies neither. Without JS, per-button action binding emits `<button name="__webjs_action" value="<hash>/<fn>">` and server `form-dispatch.js` takes the last `__webjs_action` entry in DOM order (submitter precedence). A page has no `action` export, so a bare `<form method="post">` is a `405`.
 
 ---
 
diff --git a/website/app/docs/progressive-enhancement/page.ts b/website/app/docs/progressive-enhancement/page.ts
index d037adf1b..2eb841b28 100644
--- a/website/app/docs/progressive-enhancement/page.ts
+++ b/website/app/docs/progressive-enhancement/page.ts
@@ -173,7 +173,7 @@ export default function NewPost({ actionData }: {
     </p>
 
     <p>
-      The renderer validates and refuses unparseable submitter options at render time: a submitter button carrying a <code>name</code> attribute, using <code>&lt;input type="image"&gt;</code>, or setting <code>formmethod="get"</code> or <code>formenctype="text/plain"</code> throws an actionable refusal error so both JS and no-JS execution paths stay identical by construction (#1207).
+      The renderer validates submitter options at render time: only submit buttons and <code>&lt;input type="submit"&gt;</code> controls are supported. A submitter carrying <code>name</code>, <code>value</code>, <code>form</code>, or static <code>formaction</code> attributes, using <code>&lt;input type="image"&gt;</code>, or setting <code>formmethod="get"</code> or <code>formenctype="text/plain"</code> throws an actionable refusal error so both JS and no-JS execution paths stay identical by construction (#1207).
     </p>
 
     <h3>3. Make components render correctly on the server</h3>
diff --git a/website/app/docs/server-actions/page.ts b/website/app/docs/server-actions/page.ts
index e0a6847d2..8521e8bfb 100644
--- a/website/app/docs/server-actions/page.ts
+++ b/website/app/docs/server-actions/page.ts
@@ -472,7 +472,7 @@ export default function NewPost({ actionData }: {
       <li><strong>An identity that no longer resolves</strong> is a <code>422</code> re-render carrying a resubmit message and the submitted values. That is a form held open across a deploy; a 404 would discard what was typed and a silent success would report a write that never happened.</li>
     </ul>
     <p>Everything the action declares applies here too, or an action would be protected over RPC and open over a form: <code>validate</code> runs on the submitted <code>FormData</code>, the <code>middleware</code> chain runs (with the page's <code>params</code> / <code>searchParams</code> / <code>url</code> on <code>ctx</code>), and <code>invalidates</code> is evicted when the action actually ran. The submission is Origin-verified exactly like an RPC call, so a no-JS form needs no CSRF token field. An action declaring <code>method = 'GET'</code> cannot be bound to a form (it rides its arguments in the URL and skips the CSRF check), which is a <code>405</code> at runtime and the <code>form-action-not-a-get-action</code> error in <code>webjs check</code>. A streamed return is refused on this path: a submission is answered with a redirect or a page, and with JS off there is no consumer for frames.</p>
-    <p>Submit buttons can also bind per-button server actions via <code>formaction=\${action}</code> on a <code>&lt;button&gt;</code> or <code>&lt;input type="submit"&gt;</code> inside a bound form. Without JavaScript, the clicked submitter button posts its identity field and takes precedence over the form's default action. Submitters cannot carry their own <code>name</code> attribute, use <code>&lt;input type="image"&gt;</code>, or declare <code>formmethod="get"</code> / <code>formenctype="text/plain"</code>.</p>
+    <p>Submit buttons can also bind per-button server actions via <code>formaction=\${action}</code> on a <code>&lt;button&gt;</code> or <code>&lt;input type="submit"&gt;</code> inside a bound form. Without JavaScript, the clicked submitter posts its identity field and takes precedence over the form's default action. Only actual submit controls are supported. Submitters cannot carry their own <code>name</code>, <code>value</code>, or <code>form</code> attribute, a static <code>formaction</code>, use <code>&lt;input type="image"&gt;</code>, or declare <code>formmethod="get"</code> / <code>formenctype="text/plain"</code>.</p>
     <p>With JavaScript off this is a native round-trip (the browser submits, follows the 303, or renders the 422). With JavaScript on the client router applies the 422 in place (no reload, typed input preserved) and follows the 303 via fetch. Both ends of the progressive-enhancement spectrum from one piece of code, no form library. See the <a href="/docs/client-router">client router</a> docs for the rendering behavior, and <a href="/docs/progressive-enhancement">progressive enhancement</a> for the full write-path pattern.</p>
   `;
 }
diff --git a/website/app/docs/ssr/page.ts b/website/app/docs/ssr/page.ts
index f2dca07d7..25419230a 100644
--- a/website/app/docs/ssr/page.ts
+++ b/website/app/docs/ssr/page.ts
@@ -165,7 +165,7 @@ async function loadExpensiveItems() {
     </table>
     <p>The custom-element <code>.prop</code> path supports rich types out of the box: Array, Object, Date, Map, Set, BigInt, and reference cycles. Functions, class instances with private state, and DOM nodes are unserializable; they drop with a dev warning. See <a href="/docs/components">Components</a> for the full property-binding semantics.</p>
 
-    <p><strong>One exception to the table above: a function under <code>action=</code> or <code>formaction=</code> is never serialized.</strong> Stringifying a function writes its source into the HTML, and during SSR an imported <code>'use server'</code> action is the real function, so that source is the action's whole body. An unquoted <code>action=\${fn}</code> on a <code>&lt;form&gt;</code> is the one supported binding: the renderer resolves the action's identity, drops the attribute, and emits a hidden field (see <a href="/docs/server-actions">Server Actions</a>). Every other shape under those two names throws instead, including the boolean row and the native <code>.prop</code> row (on a <code>&lt;form&gt;</code>, or <code>.formAction</code> on a button or input, where the property reflects). Every other attribute behaves exactly as the table says, and a string-valued action is unchanged. See <a href="/docs/troubleshooting">Troubleshooting</a>.</p>
+    <p><strong>One exception to the table above: a function under <code>action=</code> or <code>formaction=</code> is never serialized.</strong> Stringifying a function writes its source into the HTML, and during SSR an imported <code>'use server'</code> action is the real function, so that source is the action's whole body. An unquoted <code>action=\${fn}</code> on a <code>&lt;form&gt;</code>, or an unquoted <code>formaction=\${fn}</code> on a submit button or <code>&lt;input type="submit"&gt;</code> inside a bound form, is supported: the renderer resolves the action's identity and emits the reserved identity field (see <a href="/docs/server-actions">Server Actions</a>). Unsupported submitter types and conflicting submitter attributes throw instead. Every other shape under those two names throws, including the boolean row and the native <code>.prop</code> row (on a <code>&lt;form&gt;</code>, or <code>.formAction</code> on a button or input, where the property reflects). Every other attribute behaves exactly as the table says, and a string-valued action is unchanged. See <a href="/docs/troubleshooting">Troubleshooting</a>.</p>
 
     <h2>Metadata in &lt;head&gt;</h2>
     <p>The SSR pipeline collects metadata from the layout chain and the page, then injects it into the document <code>&lt;head&gt;</code>. You declare metadata via a named export:</p>
diff --git a/website/app/docs/troubleshooting/page.ts b/website/app/docs/troubleshooting/page.ts
index c22b61103..2b6bf085d 100644
--- a/website/app/docs/troubleshooting/page.ts
+++ b/website/app/docs/troubleshooting/page.ts
@@ -45,9 +45,9 @@ export default function Troubleshooting() {
     <p><strong>Symptom:</strong> a render fails with <code>a function was interpolated into action=</code>, or with <code>the function in action= is not a server action</code>. The supported binding is an unquoted <code>action=\${fn}</code> on a <code>&lt;form&gt;</code>, where the function is imported from a <code>'use server'</code> module; the first message means the shape was a near-miss the renderer will not stringify, and the second means the shape was right but the function is not an action the server can run. Where that surfaces depends on which render threw. From a <strong>page or layout</strong> it propagates, so the nearest <code>error</code> boundary catches it and the message is visible. From inside a <strong>component</strong> it does not: per-component SSR error isolation contains it, so dev renders an error box in place of the component while production renders the component empty and the page still returns 200. A form that has silently vanished in production, with no error anywhere, is the same bug wearing a disguise; check the server log for the message. In neither case is the action's source emitted.</p>
     <p>Two refinements on "renders the component empty", because both send people looking in the wrong place. The isolation replaces the element through its matching closing tag, so <strong>anything slotted into that component disappears with it</strong>: put the bad form in a shared header or shell and every page returns 200 with an empty body, which reads like a routing failure rather than one broken component. And on a route with a <code>loading.ts</code>, the page renders inside a <code>Suspense</code> boundary after the 200 and the shell are already flushed, where a throw is currently swallowed with <strong>no server log and no error report</strong>; the visitor gets chrome and a blank body, and with JS off the loading skeleton simply stays. That silence is why the log line you are looking for may not exist on that path; it is a known gap rather than intended behaviour.</p>
     <p><strong>Cause:</strong> during SSR an imported <code>'use server'</code> action is the REAL function (the RPC stub exists only in the browser). The supported binding resolves that function's identity instead of stringifying it, but in any OTHER shape <code>action=</code> is an ordinary attribute hole, so stringifying it would write the action's whole body into the HTML every visitor downloads: its logic, the query shapes it builds, and any literal written inside it, a connection string or internal path included.</p>
-    <p><strong>Assume outer values are exposed too.</strong> On Node, <code>Function.prototype.toString</code> returns source text, so a module-scope <code>const</code> the body reads appears only as its identifier. That is NOT a guarantee you can rely on: Bun transpiles a module before the engine sees it and can fold a module-scope string literal straight into the body, so the same action reports <code>Authorization: "Bearer sk_live_…"</code> where Node reports <code>Bearer \${VENDOR_API_KEY}</code>. Do not go looking for the rule that decides when it folds. It is a transpiler's internal choice rather than a documented boundary, and two modules on the same Bun version can differ. Whether a secret in an outer binding escapes therefore depends on the runtime and on how the module was transformed, and it is not a boundary worth building a habit on. Treat everything reachable from the action as exposed, which is what the refusal assumes. WebJs refuses rather than emitting it. The refusal covers every shape that is not the binding: <code>formaction=</code> anywhere, <code>action=\${fn}</code> on a tag that is not a <code>&lt;form&gt;</code>, a quoted <code>action="\${fn}"</code> or mixed <code>action="/x/\${fn}"</code> (quoting turns a binding hole back into a plain attribute), and a function wrapped in an array (<code>action=\${[fn]}</code>), which stringifies its elements the same way. One shape it does not cover: a hole inside an HTML comment is emitted raw by the renderer, so commenting a working form out does NOT disable the interpolation, it turns the binding back into a leak. Delete the form rather than commenting around it. <code>.action=\${fn}</code> on a native form is refused at SSR too, even though the property is dropped there, so a page cannot render clean on the server and then throw on hydration, where the reflected IDL attribute would carry the source into the live DOM.</p>
+    <p><strong>Assume outer values are exposed too.</strong> On Node, <code>Function.prototype.toString</code> returns source text, so a module-scope <code>const</code> the body reads appears only as its identifier. That is NOT a guarantee you can rely on: Bun transpiles a module before the engine sees it and can fold a module-scope string literal straight into the body, so the same action reports <code>Authorization: "Bearer sk_live_…"</code> where Node reports <code>Bearer \${VENDOR_API_KEY}</code>. Do not go looking for the rule that decides when it folds. It is a transpiler's internal choice rather than a documented boundary, and two modules on the same Bun version can differ. Whether a secret in an outer binding escapes therefore depends on the runtime and on how the module was transformed, and it is not a boundary worth building a habit on. Treat everything reachable from the action as exposed, which is what the refusal assumes. WebJs refuses rather than emitting it. The refusal covers every shape that is not the binding: an unsupported <code>formaction=</code> shape, <code>action=\${fn}</code> on a tag that is not a <code>&lt;form&gt;</code>, a quoted <code>action="\${fn}"</code> or mixed <code>action="/x/\${fn}"</code> (quoting turns a binding hole back into a plain attribute), and a function wrapped in an array (<code>action=\${[fn]}</code>), which stringifies its elements the same way. One shape it does not cover: a hole inside an HTML comment is emitted raw by the renderer, so commenting a working form out does NOT disable the interpolation, it turns the binding back into a leak. Delete the form rather than commenting around it. <code>.action=\${fn}</code> on a native form is refused at SSR too, even though the property is dropped there, so a page cannot render clean on the server and then throw on hydration, where the reflected IDL attribute would carry the source into the live DOM.</p>
     <p><strong>Two things stay legal</strong>, because neither stringifies its value: a custom element's <code>.action</code> property (an author-defined property, not the reflected IDL attribute a native <code>&lt;form&gt;</code> has, so <code>&lt;my-el .action=\${fn}&gt;</code> is fine), and an unquoted <code>@action=\${fn}</code> event listener, where a function is exactly what is wanted. One qualification on the first: that holds for a plain property, and NOT if the component declares it <code>reflect: true</code>. Reflection is a separate path that writes <code>String(value)</code> into the attribute without passing through the template commit sites this guard covers, so a reflecting <code>action</code> prop still emits the function's source. That path is a general problem with reflecting any function-valued prop rather than an <code>action</code> one, and it is tracked separately. Quoting a binding hole turns it back into a plain attribute, so <code>@action="\${fn}"</code> IS refused; that is the practical reason invariant 4 requires <code>@</code>, <code>.</code> and <code>?</code> holes to be unquoted. <code>?action=\${fn}</code> is refused as well: it never leaked, but a truthy function would silently emit a bare <code>action=""</code>, which is never what anyone meant.</p>
-    <p><strong>Fix:</strong> write the binding exactly: an unquoted <code>action=\${importedAction}</code> on the <code>&lt;form&gt;</code> itself, or <code>formaction=\${importedAction}</code> on a submitter button inside a bound form, with the function imported from a <code>'use server'</code> module. Do not add <code>method</code> or <code>enctype</code>; the renderer supplies both. A string action is unaffected. See <a href="/docs/server-actions">Server Actions</a> and <a href="/docs/progressive-enhancement">Progressive Enhancement</a>.</p>
+    <p><strong>Fix:</strong> write the binding exactly: an unquoted <code>action=\${importedAction}</code> on the <code>&lt;form&gt;</code> itself, or <code>formaction=\${importedAction}</code> on a submit button or <code>&lt;input type="submit"&gt;</code> inside a bound form, with the function imported from a <code>'use server'</code> module. Do not add submitter <code>name</code>, <code>value</code>, <code>form</code>, or static <code>formaction</code> attributes. Do not add <code>method</code> or <code>enctype</code>; the renderer supplies both. A string action is unaffected. See <a href="/docs/server-actions">Server Actions</a> and <a href="/docs/progressive-enhancement">Progressive Enhancement</a>.</p>
 
     <h2>A form submission answered with a 405</h2>
     <p><strong>Symptom:</strong> submitting a form returns <code>405 Method Not Allowed</code> with <code>Allow: GET, HEAD</code>, and the page itself renders fine on a GET.</p>