最直接的方式是用<form>标签包裹输入控件；必须设置method和action属性，name属性不可缺失，需用event.preventDefault()阻止默认提交，并优先使用FormData组装数据。
用 <form> 标签包裹输入控件是最直接的方式
HTML5 本身不提供“嵌入表单”的独立语法，所有表单数据收集都依赖标准 <form> 元素。关键在于正确设置 method 和 action 属性，否则点击提交后页面可能跳转失败或数据发错地方。
-
method="GET"适合简单查询（如搜索框），参数会拼在 URL 后，有长度限制且不安全 -
method="POST"是常规选择，数据放在请求体中，无长度限制，适合含密码、文件等敏感或大体积内容 -
action必须指向一个能接收并处理数据的服务端地址（如/api/submit或https://example.com/handle），留空或写错路径会导致 404 或刷新页面
必须给每个 <input> 设置 name 属性
浏览器只提交带有 name 的控件值，id 或 class 不起作用。没加 name 的输入框，后端永远收不到它的数据。
<input type="text" id="username" placeholder="用户名"> <!-- ❌ 无效 --> <input type="text" name="username" placeholder="用户名"> <!-- ✅ 正确 -->
- 复选框（
type="checkbox"）和单选框（type="radio"）需确保同一组使用相同name，靠value区分选项 - 隐藏字段用
<input type="hidden" name="token" value="abc123">传额外参数 - 按钮类控件（如
<button type="submit">）不需要name，但要有type="submit"才能触发表单提交
避免默认提交导致页面跳转或刷新
如果只是想用 JavaScript 拦截提交、做校验或发 Ajax，必须阻止表单默认行为，否则页面会立即跳转或刷新，JS 逻辑来不及执行。
- 在 JS 中监听
submit事件，调用event.preventDefault() - 不要只靠
onclick绑定按钮——它无法捕获回车提交等其他触发方式 - 示例：
document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); const data = new FormData(this); fetch('/api/submit', { method: 'POST', body: data }); });
FormData 是最稳妥的前端数据组装方式
手动拼接 JSON 或 URLSearchParams 容易漏掉文件、忽略空值、搞错编码。而 FormData 自动适配 enctype="multipart/form-data"，天然支持文件上传，且与后端 PHP/Node.js/Python 的表单解析逻辑一致。
立即学习“前端免费学习笔记（深入）”；
- 构造时传入表单元素：
new FormData(document.querySelector('form')) - 可追加额外字段：
formData.append('timestamp', Date.now()) - 注意：若表单含
file输入，fetch发送时不能设Content-Type头，否则浏览器会覆盖为错误的 boundary 值
表单提交看着简单，真正容易出问题的是 name 缺失、action 路径不对、忘记 preventDefault，以及用 JSON 替代 FormData 处理文件上传。这几个点卡住，调试起来往往比写逻辑还耗时间。
