form标签必须包裹所有可提交控件，否则带name属性的input、select、textarea等不会被提交；多个表单可共存但不可嵌套；button[type="submit"]须在form内才生效；action和method需匹配后端接口，文件上传必设enctype="multipart/form-data"；name是后端接收字段的唯一依据。
form 标签必须包裹所有可提交控件
不放在 <form> 内部的 <input>、<select>、<textarea> 等元素，提交时不会被发送到服务器——哪怕它们有 name 属性。这是最常被忽略的结构性错误。
常见现象：点击提交按钮后，后端收不到某个字段（比如 email），但前端检查 HTML 发现 name="email" 写对了——大概率是它被写在了 <form> 外面。
-
<form>是数据打包的边界，不是装饰性容器 - 多个表单可以共存于一个页面，但不能嵌套：
<form><form></form></form>是非法 HTML，浏览器会自动修复（通常截断内层） -
<button type="submit">必须在<form>内才触发提交；否则只是普通按钮
action 和 method 属性决定数据去哪、怎么发
action 指向接收数据的 URL，method 控制 HTTP 方法。这两者配合错误，会导致 404、405 或数据丢失。
典型误用：method="GET" 提交登录表单——密码会暴露在地址栏和服务器日志里；或 action="" 却期望跳转到后端路由，结果刷新当前页。
立即学习“前端免费学习笔记（深入）”；
-
method="POST"是敏感/大量数据的默认选择；GET只适合无副作用的查询（如搜索、分页） -
action值为空字符串（action=""）等价于当前 URL，但要注意路径是否带 query 参数——POST 提交会丢弃原有 query - 前后端约定必须一致：比如后端接口要求
POST /api/login，前端action就不能写成/login或漏掉/api
文件上传必须设 enctype="multipart/form-data"
只要表单里有 <input type="file">，enctype 就不能用默认值 application/x-www-form-urlencoded，否则后端收不到文件，只收到空字段或文件名字符串。
现象：前端选了文件，提交后后端 req.files 或 $_FILES 为空，但 req.body 能收到其他字段——基本就是 enctype 没改。
- 必须显式声明：
<form enctype="multipart/form-data" ...> -
enctype只在method="POST"下生效；GET表单无视该属性 - 不要写错拼写：
multipart/form-data中的连字符和斜杠不能省略或替换为空格
name 属性是后端接收字段的唯一依据
后端解析表单时，只认 name，不认 id、class 或 placeholder。没有 name 的控件，无论是否填写，都不会出现在提交数据中。
容易踩坑：用 id="username" 代替 name="username"，以为 JS 能操作、后端也能收到——JS 可以，但表单原生提交机制完全忽略 id。
- 复选框（
type="checkbox"）和单选框（type="radio"）要靠name分组，同名才互斥或归为数组 - 数组式命名如
name="hobby[]"或name="items[0].price"依赖后端框架支持，原生 HTML 不解析结构，只传原始键值对 - 避免空格、点号、括号等特殊字符在
name中，除非后端明确兼容（比如某些 PHP 配置会自动转换[]）
name、enctype、method 这三个属性一旦配错，调试时往往只看到“没收到数据”，实际原因可能分散在不同层级。建议每次写完先检查这三项是否与后端接口文档严格对齐。 
