按钮必须置于<form>内且type="submit"才能触发表单提交；若在外部需用form属性绑定；禁用type="button"或省略type值；推荐原生校验+submit事件处理，fetch提交时仍应设type="submit"并preventDefault。
按钮必须放在 <form> 内部才能触发表单提交
很多初学者把 <button> 写在 <form> 外面，点击后页面没反应——浏览器根本不会把它和表单关联。只要按钮不在 <form> 标签内部，type="submit" 就无效。
正确写法示例：
<form action="/api/login" method="POST"> <input name="username" /> <input name="password" type="password" /> <button type="submit">登录</button> </form>
-
type="submit"是关键，缺省值虽是 submit，但显式声明更可靠 - 如果按钮在 form 外，可用
form属性绑定：<button type="submit" form="myForm">+ 给<form id="myForm"> - 不要用
<input type="button">，它默认不提交，除非手动加 JS
button 的 type 值选错会导致表单静默失败
常见错误是写成 type="button" 或直接省略——这时按钮点击完全无提交行为，控制台也不报错，容易误以为 JS 出问题。
-
type="submit"：触发表单原生提交（推荐用于简单场景） -
type="button"：纯触发 JS，需手动调用form.submit()或fetch() -
type="reset"：清空表单字段，慎用，用户可能误点
特别注意：Vue/React 等框架中，若用 @click 或 onClick 绑定函数，仍建议保留 type="submit" 并在事件里 event.preventDefault()，否则可能双提交。
立即学习“前端免费学习笔记（深入）”；
提交前校验失败时，别只靠 JS 阻止，要配合 required 和 checkValidity()
单纯靠 onclick 里写 if (!valid) return 很脆弱：用户可右键“检查元素”删掉 JS，或禁用 JS 后直接提交脏数据。
- 基础校验优先用原生属性：
<input required>、<input type="email">、<input min="18"> - 自定义校验逻辑应在
form.addEventListener('submit', ...)中，而非按钮 click —— 因为回车提交也会触发 submit 事件 - 调用
form.checkValidity()返回 false 时，浏览器自动聚焦首个无效字段并显示提示（无需额外 CSS/JS）
用 fetch 提交时，按钮仍该设为 type="submit"，但必须 preventDefault
现代项目常改用 fetch 替代原生提交，但很多人直接把按钮改成 type="button"，导致回车无法提交、无障碍支持变差、语义丢失。
- 保持
<button type="submit">，在form.onsubmit = e => { e.preventDefault(); /* fetch logic */ } - 这样既支持键盘回车，又兼容屏幕阅读器（会读作“提交按钮”）
- 提交中状态建议用
button.disabled = true，而不是仅改文字——防止重复点击，且禁用后按钮自动失去焦点
原生提交和 fetch 不是二选一，而是语义层和交互层的分工：按钮负责“意图”，JS 负责“实现”。漏掉这层区分，后续加 loading、错误重试、离线缓存都会更难对齐。
