HTML表单提交要求所有控件（输入框、按钮等）必须位于同一标签内且均带name属性，否则request.form.get()因找不到对应键而返回None；多按钮可通过共享name、不同value区分后端操作。
HTML 本身不支持跨 <form></form> 提交——所谓“跨表单”，本质是误用或结构混乱导致的逻辑错觉。浏览器只提交当前 <form></form> 内部带 name 的控件，其他表单里的字段不会被捎带过去。
为什么 request.form.get() 总是 None？
常见错误是把输入框和按钮拆成两个独立 <form></form>：
<form><input name="query"></form> <form><button type="submit" name="action" value="search">搜</button></form>
点击按钮只会提交第二个表单，query 字段根本不在其中。后端调用 request.form.get("query") 必然返回 None。
- 所有需要提交的字段（
<input>、<select></select>、<button></button>）必须在同一个<form></form>标签内 - 每个字段必须有
name属性，否则后端无法通过键名获取值 - 不要依赖 JS 拼接多个表单数据再 submit——这绕过了原生表单机制，容易漏掉 disabled 字段或破坏 CSRF 验证
Flask 中如何让一个按钮触发不同后端行为？
靠 name + value 组合区分动作，而不是靠多个表单：
立即学习“前端免费学习笔记（深入）”；
<form method="post"> <input name="q" value="hello"> <button type="submit" name="op" value="search">搜索</button> <button type="submit" name="op" value="suggest">联想</button> </form>
后端统一接收：
op = request.form.get("op")
if op == "search":
result = do_search(request.form.get("q"))
elif op == "suggest":
result = do_suggest(request.form.get("q"))
- 多个
<button></button>共享同一个name，靠value区分语义，避免 if/else 判断空变量 - 不用为每个按钮写单独路由；一个 POST 路由处理全部动作更清晰
- 如果按钮要跳转到不同 URL，优先用
url_for()+redirect()，而不是靠前端action动态改写
前端路由（如 Vue Router / React Router）和 HTML 表单能混用吗？
能，但必须明确分工：前端路由管页面切换，表单管数据提交。二者不能互相替代。
例如，在 Vue 单页应用中写：
<form @submit.prevent="handleSubmit"> <input v-model="query"> <button type="submit">提交</button> </form>
这时表单不再走原生提交，而是由 JS 拦截，用 fetch 或 axios 发送 POST 请求到 Flask 接口。此时：
- HTML 的
action和method属性已失效，可省略 - CSRF 令牌需手动从 meta 标签或 cookie 中读取，并作为 header 或 body 字段传入
- 后端接口应返回 JSON，而非渲染模板；否则会破坏单页体验
- 别在
@submit.prevent里又调router.push()——这属于状态跳转，和表单提交是两件事
最易被忽略的一点：当混合使用前端框架与传统表单时，enctype、name、CSRF 处理方式三者必须同步——漏掉任一环节，轻则数据收不到，重则被拦截 400 或 403。
