formaction仅对type="submit"的input或button有效，且必须关联真实form；按钮在form外需用form属性显式指定ID；多个formaction按钮共存时仅点击者生效；URL需手动编码，相对路径受base标签影响。
formaction 只对 type="submit" 的 <input> 或 <button> 有效，且必须关联到一个真实存在的 <form>，否则点击无任何提交行为。
formaction 必须配合 type="submit" 才生效
浏览器会直接忽略非提交型控件上的 formaction 属性。常见错误包括：
-
<input type="text" formaction="/save">—— 完全无效，输入框不触发提交 -
<button type="button" formaction="/delete">删除</button>—— 不提交，type="button"阻断了表单默认行为 -
<button formaction="/api/draft">存草稿</button>—— 缺少type="submit"，部分浏览器（如旧版 Safari）可能不识别
正确写法只有一种模式：<input type="submit" formaction="/xxx"> 或 <button type="submit" formaction="/xxx"></button>。
按钮在 form 外部时，必须用 form 属性显式关联
如果提交按钮不在 <form> 标签内部，formaction 不会自动生效，除非你用 form 属性指向目标表单 ID：
立即学习“前端免费学习笔记（深入）”；
<form id="userForm" action="/default"> <input name="id" value="123"> </form> <input type="submit" form="userForm" formaction="/api/update" value="更新">
注意点：
-
form="userForm"中的值必须与目标<form id="...">完全一致，大小写敏感 - 目标
<form>不能被disabled或移除 DOM，否则关联失败 - 不支持通过
form关联跨 iframe 的表单
多个 formaction 按钮共存时，只有被点击的那个起作用
同一个表单里可以放多个带 formaction 的提交按钮，但每次提交只使用当前点击按钮的 formaction、formmethod 和 formenctype，其余按钮的这些属性完全被忽略。
例如：
<form> <input name="q" value="test"> <input type="submit" value="搜百度" formaction="https://www.baidu.com/s" formmethod="get"> <input type="submit" value="搜谷歌" formaction="https://www.google.com/search" formmethod="get"> </form>
点击“搜百度”时，数据以 GET 发往 https://www.baidu.com/s?q=test；点击“搜谷歌”则发往另一个地址——二者互不影响。
容易踩的坑：
- 误以为后端能通过按钮
name区分操作类型：其实formaction已把请求路由隔离，后端 endpoint 不同，无需再靠字段判别 - 给多个按钮设相同
formaction却不同name：语义混乱，建议统一用不同 endpoint 替代 - 混用
formaction和 JS 的onclick+form.submit()：后者绕过所有formaction，强制走<form>的原始action
formaction 的 URL 构造和编码注意事项
formaction 值本身不处理 URL 编码，若含动态参数（如用户 ID、搜索词），必须手动编码或用 URL API 构造：
- 错误写法：
formaction="/user/" + userId + "/delete"—— 若userId是"abc def"，结果变成/user/abc def/delete，400 错误 - 安全做法：
formaction="/user/" + encodeURIComponent(userId) + "/delete" - 更健壮方式（推荐）：
const url = new URL('/user/delete', location.origin); url.pathname = '/user/' + userId + '/delete'; button.formAction = url.toString();
特别注意：相对路径在有 <base> 标签的页面中会被重写，比如 <base href="https://cdn.example.com/"> 会让 formaction="api/save" 解析成 https://cdn.example.com/api/save —— 这通常不是你想要的。
