表单提交必须设置 action 和 method，否则易导致 404、敏感数据泄露或字段丢失；name 属性决定后端能否接收字段；禁用 disabled 控件不提交，readonly 会提交；防重复提交需前后端配合；现代开发推荐 fetch 替代原生提交。
表单提交必须设置 action 和 method
不设 action，浏览器默认提交到当前 URL，容易 404 或覆盖页面；不设 method，默认用 GET，敏感数据会暴露在地址栏里。实际开发中，登录、注册这类操作几乎都该用 POST。
-
action值必须是后端能接收请求的完整路径，比如/api/login或https://example.com/submit -
method推荐显式写成method="post"，哪怕服务端支持两种方式，也别依赖默认值 - 如果用
GET（如搜索框），确保所有字段值都符合 URL 编码规则，否则空格、中文可能被截断或乱码
name 属性决定服务器能否收到字段
没有 name 的表单控件（比如 <input type="text"> 缺少 name="username"）根本不会被提交。后端接收时靠的就是这个 name 作为键名，比如 Python Flask 中的 request.form['username']。
- 按钮类元素（
<button>、<input type="submit">）也要加name，否则点击后可能无法区分提交来源 - 复选框（
type="checkbox"）多个同名时，浏览器只提交勾选项，且值为各自value；没设value就默认传"on"，容易误导后端解析 - 禁用（
disabled）的控件不会提交，但readonly的会 —— 这点常被误用来“阻止修改却仍要传值”
防止重复提交得靠前端 + 后端配合
单纯禁用提交按钮（button.disabled = true）只是防用户手抖，网络延迟或刷新仍可能导致多次请求。真正可靠的做法是：前端加防抖 + 后端校验 + 接口幂等设计。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 提交瞬间立即禁用按钮，并把文案改成“提交中…”（避免用户以为卡住又点一次）
- 用
fetch或XMLHttpRequest发送时，加AbortController防止旧请求未完成就发新请求 - 后端对关键操作（如支付、下单）必须生成唯一
request_id或用 token 校验，不能只靠前端控制
现代项目中更推荐用 fetch 替代原生表单提交
原生 <form> 提交会整页跳转或刷新，体验割裂；而 fetch 可精确控制请求头、错误处理、加载状态，尤其适合 SPA 场景。
立即学习“前端免费学习笔记（深入）”；
- 用
event.preventDefault()阻止默认提交行为，再手动收集字段：new FormData(formElement)可直接打包所有带name的控件 - 注意
FormData不自动包含disabled字段，也不含未勾选的checkbox，这点和原生提交一致 - 若后端要求 JSON 格式，别直接传
FormData，得先转成对象再JSON.stringify()，同时设Content-Type: application/json
name 拼错、action 路径写错、忘记处理 disabled 与 readonly 差异，这几个点在线上环境最容易导致“数据没传过去”却查不出原因。 
