简单易学HTML搭建测试反馈表单-html教程-PHP中文网

表单提交后页面刷新却没收到数据的根本原因是缺少method和action属性，导致浏览器默认用get提交到当前url，参数丢失；需显式设置method="post"、action="/submit"，按钮加type="submit"，字段必有name，读取用element.value而非getattribute，fetch须指定method: 'post'且不手动设content-type。

简单易学html搭建测试反馈表单

表单提交后页面刷新却没收到数据

这是最常见的问题：用户填完点提交，页面跳转或刷新了，但后端根本没收到任何字段。根本原因在于 <form></form> 缺少 method 和 action 属性，浏览器默认用 GET 提交到当前 URL，参数全拼在地址栏里，后端不主动读取就等于丢弃。

实操建议：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

明确写上 <form method="POST" action="/submit"></form>（路径按你后端接口定）

如果只是本地测试、没后端，用 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></textarea> 和 <select></select> 更容易踩坑。

实操建议：

<input> 和 <textarea></textarea> 一律用 element.value 读取（不是 getAttribute('value')）
<select multiple></select> 要遍历 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></textarea> 都配 id + 对应 <label for="xxx"></label>，否则触屏点击区域太小，iOS 上尤其明显