表单交互需同步处理HTML结构、浏览器默认行为和JS绑定时机；method应优先用POST，action须指向真实端点；submit事件必须在form上监听并调用preventDefault()；label的for必须严格匹配input的id。
表单交互不是靠“写完就跑”，而是必须同时处理 HTML 结构、浏览器默认行为、JavaScript 绑定时机这三件事。漏掉任意一环，submit 一按就刷新页面，或者 success 消息死活不显示。
form 的 method 和 action 写错会导致数据根本没发出去
常见错误是把 method="GET" 用在登录或注册场景，导致密码明文出现在 URL 里；或者 action 留空但后端没监听当前路径，结果 404 或 500。更隐蔽的是用 action="submit.php" 却没部署该文件，浏览器静默失败，控制台只报 404，用户完全无感知。
-
method="POST"是绝大多数表单的合理默认值，尤其含password、file或修改类操作时 -
action必须指向一个真实可响应的端点；开发阶段可用action="#"临时禁用提交，但上线前必须改掉 - 如果只是前端验证+本地反馈（比如弹个提示），
action可设为空字符串action=""，但必须用event.preventDefault()阻止默认提交
input type="submit" 点击后页面刷新，JS 逻辑没执行
这是最典型的“以为绑了事件，其实被默认行为劫持”问题。浏览器对 type="submit" 的按钮有强默认：触发表单提交 → 页面跳转/刷新 → JS 中断。哪怕你在按钮上写了 onclick="showSuccess()"，函数可能执行了，但紧接着页面就刷没了。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确做法是在
form元素上监听submit事件，而不是按钮的click - 必须调用
event.preventDefault()，否则一切 JS 后续操作都白搭 - 推荐写法：
<form id="myForm">...</form><br><script><br>document.getElementById('myForm').addEventListener('submit', function(e) {<br> e.preventDefault(); // 关键<br> // 这里放验证、AJAX、显示 success 消息等<br>});<br></script>
label 和 input 的 for/id 不匹配，无障碍和点击体验全崩
很多开发者只写 <label>姓名</label><input type="text" name="name">，看起来能用，但实际有三个硬伤：屏幕阅读器无法关联、点击文字不能聚焦输入框、移动端 tap 区域变小。
立即学习“前端免费学习笔记（深入）”；
-
label的for属性必须严格等于对应input的id值，大小写、空格、连字符都不能错 - 别依赖
name，name是提交时的字段名，id才是 DOM 定位依据 - 示例正确写法：
<label for="user-email">邮箱地址</label><br><input type="email" id="user-email" name="email" required>
最容易被忽略的是：表单验证通过后，如果用 fetch 提交，返回成功但没清空字段或重置状态，用户二次提交会卡在重复校验；而直接用原生 submit 又绕不开刷新。折中方案是——保留原生表单结构，但用 event.preventDefault() 拦住，自己控制提交节奏和反馈闭环。
