按钮默认 type 是 submit，易导致表单意外提交刷新页面；非提交按钮必须显式设 type="button"；推荐使用 <button> 而非 <input type="button">，因其支持嵌套 HTML、无障碍更好；form 属性可跨区域绑定表单；reset 按钮应淘汰，改用 JS 精准控制。
按钮默认 type 是 submit，不写就容易刷新页面
放在 <form> 里的 <button> 或 <input>，只要没显式声明 type，浏览器一律按 type="submit" 处理。点一下，表单就提交，页面立刻刷新——哪怕你只打算触发一个 fetch 请求或弹个提示框。
常见错误现象：
- JavaScript 点击事件执行了，但页面闪一下就跳走，
console.log都来不及看清 - 异步请求发出去了，但还没收到响应，页面已重载，DOM 被清空
- 表单验证没生效，因为提交被跳过或中断
解决办法很简单：所有非提交用途的按钮，必须写死 type="button"。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<form id="search-form"> <input type="text" name="q"> <button type="button" onclick="doSearch()">搜索</button> <button type="submit">正式提交</button> </form>
用 <button> 还是 <input type="button">？
<button> 更推荐，尤其当按钮内容不止是纯文本时。
差异点：
-
<button type="button">✅</button>可以嵌套图标、<svg>、甚至<span>做状态文案（比如“提交中…”） -
<input type="button" value="文本">只能靠value属性设文字，无法插入 HTML -
<button>的默认样式更一致，无障碍支持更好（自动带role="button"） - 两者都支持
disabled、form、formaction等属性，但<button>的属性兼容性略优
所以除非旧项目强依赖 <input>，否则统一用 <button>。
form 属性能让按钮脱离表单 DOM 位置仍关联提交
按钮不必嵌在 <form> 标签内部才能控制它——用 form 属性就能跨区域绑定。
适用场景：
- 模态框里的“确认提交”按钮，实际表单在页面其他位置
- 工具栏按钮需要复用多个表单逻辑
- 避免因 DOM 结构限制导致样式或布局别扭
示例：
<form id="user-form" action="/api/user" method="post"> <input name="name"> </form> <button type="submit" form="user-form">保存用户</button>
注意：form 属性值必须严格匹配目标 <form> 的 id；若目标表单无 id，这个属性就失效。
重置按钮（reset）基本该淘汰了
<button type="reset"> 或 <input type="reset"> 会把所有字段恢复成初始 value 或空值，但问题很多：
- 用户填了半页表单，误点就全丢，没二次确认机制
- 动态生成的字段（比如 JS 添加的行）、受控组件（React/Vue）可能不响应 reset
- 现代交互习惯更倾向“撤销某一项”或“清空当前字段”，而不是整表单回滚
替代方案：
- 用 JavaScript 实现精准清除：比如
document.getElementById('email').value = '' - 封装一个带确认弹窗的清除函数，比原生
reset更可控 - 真要保留重置功能，至少加
onclick="return confirm('确定清空？')"
真正难处理的是那些没设初始 value 的字段——它们 reset 后变空，但用户根本不知道“初始值”到底是什么。
