表单元素必须位于<form>标签内才能参与提交，因为浏览器仅收集同一<form>内带name且未disabled的可提交控件，并按name组装键值对；脱离<form>或缺失name的元素不会被自动序列化。
表单元素只在 <form> 标签内部才参与数据提交，脱离 <form> 的 <input>、<select> 等不会被任何提交动作收集。
为什么 <input> 必须放在 <form> 里才能提交
浏览器的表单提交机制依赖 <form> 元素作为作用域边界。它负责聚合所有子级可提交控件（如 <input type="text">、<textarea>、<select>），并按 name 属性组装键值对。没有 <form> 包裹，这些元素只是独立 DOM 节点，不参与任何自动序列化流程。
常见错误现象：
- 点击
<input type="submit">没反应，控制台也无请求 —— 很可能该按钮没在<form>内，或<form>缺少action - 提交后后端收不到某个字段 —— 检查对应
<input>是否漏写name，或被包裹在嵌套的<form>（HTML 不允许嵌套表单，第二个<form>会被浏览器截断）
name 属性是数据提交的唯一标识符
只有带 name 的表单控件才会出现在提交载荷中。它的值就是 HTTP 请求参数的 key，value 是用户输入或控件当前状态（如勾选的 <input type="checkbox"> 值为 value 属性内容，未勾选则不提交）。
立即学习“前端免费学习笔记（深入）”；
使用场景与要点：
-
<input type="radio">和<input type="checkbox">必须同名才能形成互斥/多选组，后端靠这个name接收数组或单值 -
disabled控件即使有name也不会提交；readonly控件会提交，但用户不能编辑 - 隐藏域
<input type="hidden" name="token" value="abc">靠name参与提交，常用于 CSRF token 或业务上下文
GET 与 POST 提交时的数据组织方式差异
method="get" 把所有 name=value 对拼成 URL 查询字符串，长度受限（通常 ≤2048 字符），且明文暴露；method="post" 默认用 application/x-www-form-urlencoded 编码，放在请求体中，无长度硬限制，适合传敏感或大量数据。
注意点：
- 文件上传必须用
method="post"+enctype="multipart/form-data"，否则<input type="file">的二进制内容无法正确编码 - 如果
<form>没写method，浏览器默认用 GET —— 这常导致密码、长文本等意外暴露在地址栏 - GET 提交的
<input type="checkbox">若未勾选，根本不会出现在 URL 中；POST 同样不提交未勾选项
表单作用域外的控件如何“参与”提交
原生 HTML 不支持跨 <form> 提交，但可通过 JavaScript 手动收集并发送：
- 用
document.querySelector('input[name="username"]').value主动读取任意位置的控件值 - 监听非表单内按钮的
click事件，构造FormData或fetch()请求 - 把多个逻辑区域的控件统一放在一个
<form>下，用 CSS 布局分离视觉，而非用多个<form>切割
真正容易被忽略的是：表单提交不是“收集所有 input”，而是“收集本 <form> 内所有带 name 且未 disabled 的可提交控件”。哪怕 DOM 结构上看起来挨得很近，只要不在同一 <form> 标签下，就彼此绝缘。
