表单提交必须设置action和method属性，否则易导致404或敏感数据泄露；后台接收逻辑须与前端一致，name属性决定键名，禁用控件不提交，js拦截需用formdata并匹配enctype中间件。
表单提交必须设置 action 和 method 属性
不写 action，表单会默认提交到当前 URL，大概率 404；不写 method，默认是 GET，敏感数据暴露在地址栏里。后台接收逻辑必须和前端一致——比如前端用 method="POST"，后端路由就得监听 POST 请求，不能只写 GET 处理函数。
常见错误现象：405 Method Not Allowed 就是前后端 HTTP 方法不匹配；404 Not Found 多半是 action 路径写错，比如漏了 /api/submit 里的前导斜杠，或拼成 /apu/submit 这种手误。
-
action值应为绝对路径（如/api/login）或完整 URL（如https://api.example.com/v1/submit），避免相对路径引发的路径错乱 -
method优先选POST，除非是无副作用的查询（如搜索框） - 若用
GET，注意浏览器地址栏长度限制（通常 2KB 左右），参数过多会截断
input 控件的 name 属性决定后台能否收到数据
后台接收的是键值对，键名完全来自每个可提交控件的 name 属性值，不是 id，也不是 class。没写 name 的 input、select、textarea，提交时直接被忽略。
使用场景：登录表单中，邮箱输入框必须写 <input name="email">，后台才能通过 req.body.email（Express）或 $_POST['email']（PHP）取到值。如果写成 name="user_email"，后台代码也得跟着改，不能硬编码成 email。
- 复选框（
type="checkbox"）多个同名时，需确保后端能解析数组（如 Express 需body-parser配置extended: true） - 禁用（
disabled）的控件不会提交，灰掉但还想传值？改用readonly+ 隐藏域补充 - 按钮的
name也会被提交（如<button name="action" value="save">保存</button>），可用于区分操作意图
防止页面跳转刷新，要用 JavaScript 拦截并用 fetch 提交
原生表单提交会强制刷新页面，用户体验差，且无法自定义错误提示。想静默提交、显示 loading、处理响应，必须用 JS 拦截默认行为。
关键点：调用 event.preventDefault()，再用 fetch 构造请求。注意 Content-Type —— 表单默认是 application/x-www-form-urlencoded，但 fetch 默认不设该头，后端可能收不到解析后的字段。
- 推荐用
FormData对象收集表单数据：const data = new FormData(formElement)，它自动适配enctype，兼容文件上传 - 手动构造 URLSearchParams 仅适用于纯文本字段：
new URLSearchParams({ email: "a@b.c", pwd: "123" }) - 别忘了处理
fetch的网络失败（catch）、HTTP 错误（检查response.ok）、以及后端返回的业务错误（如response.status === 400）
后端接收时要注意 enctype 和解析中间件匹配
表单的 enctype 决定了数据编码方式，也决定了后端用什么方式解包。最常踩的坑：前端写了 enctype="multipart/form-data"（比如有文件上传），但后端没配文件解析中间件（如 Express 的 multer），结果整个请求体读不出来，req.body 是空对象。
三种常见 enctype 及对应后端处理：
-
application/x-www-form-urlencoded（默认）：Node.js 用express.urlencoded({ extended: true })；PHP 自动解析进$_POST -
multipart/form-data：必须用专用库（如multer、busboy），且不能同时挂载urlencoded中间件（会冲突） -
text/plain：极少用，后端需手动按换行/等号分割，不推荐
复杂点在于混合场景：一个表单既有文本字段又有文件，enctype 必须是 multipart/form-data，但后端既要解析文本字段（req.body），又要处理文件（req.file 或 req.files），中间件配置稍有遗漏就全盘失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
