表单提交后页面刷新却没收到数据的根本原因是<form>缺少method和action属性，导致浏览器默认用GET提交到当前URL，参数丢失；需显式设置method="POST"、action="/submit"，按钮加type="submit"，字段必有name，读取用element.value而非getAttribute，fetch须指定method: 'POST'且不手动设Content-Type。
表单提交后页面刷新却没收到数据
这是最常见的问题：用户填完点提交，页面跳转或刷新了，但后端根本没收到任何字段。根本原因在于 <form> 缺少 method 和 action 属性，浏览器默认用 GET 提交到当前 URL，参数全拼在地址栏里，后端不主动读取就等于丢弃。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 明确写上
<form method="POST" action="/submit">（路径按你后端接口定） - 如果只是本地测试、没后端，用
action="#"+ JavaScript 拦截提交，避免刷新：document.querySelector('form').addEventListener('submit', e => {<br> e.preventDefault();<br> console.log(new FormData(e.target));<br>}); - 别依赖浏览器自动识别按钮——必须给提交按钮加
type="submit"，否则可能不触发表单提交逻辑
输入框值取不到或总是空字符串
常见于用了 value 属性但没初始化，或 JS 里用错了获取方式。HTML 表单控件的实时值不等于其 value 属性初始值，尤其 <textarea> 和 <select> 更容易踩坑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<input>和<textarea>一律用element.value读取（不是getAttribute('value')） -
<select multiple>要遍历selectedOptions，单选直接用select.value - 检查是否漏写了
name属性——没name的字段，无论填什么，都不会被包含在提交数据或FormData中
用 FormData 收集数据但上传失败
本地测试时，很多人直接 fetch('/submit', { body: new FormData(form) })，结果报错 TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.——因为没指定 method，fetch 默认用 GET。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- fetch 必须显式写
method: 'POST' - 不要手动设置
Content-Type头——FormData会自动生成带 boundary 的multipart/form-data，设错反而导致后端解析失败 - 若后端只认 JSON，就别用
FormData，改用JSON.stringify(Object.fromEntries(new FormData(form)))，但注意这会丢掉文件字段
移动端输入体验差、键盘不弹出或光标错位
纯 HTML 表单在手机上常出现：点输入框没反应、弹出数字键盘却要输文字、光标停在文字中间无法删除。根源是没声明语义化类型和输入模式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 邮箱用
<input type="email">，电话用<input type="tel">，数字用<input type="number">——不只是样式，还影响原生键盘类型 - 中文输入场景加
inputmode="text"（比如搜索框），避免 iOS 强制弹出数字键盘 - 所有
<input>和<textarea>都配id+ 对应<label for="xxx">，否则触屏点击区域太小，iOS 上尤其明显
name 的字段、带 method 和 action 的 <form>、以及能阻止默认行为并读取数据的 JS。其余都是让事情不崩的细节。 
