必须显式写type属性，因浏览器对未声明type的行为不一致：Chrome/Firefox/Safari在form内默认submit、外默认button，IE无论在哪都默认button，W3C规范要求显式声明以确保行为可控。
不写 type 属性的 <button></button> 在表单里默认是 submit，但 IE 会当 button 处理 —— 这个差异足以导致表单意外提交或完全没反应。
为什么必须显式写 type？
浏览器对未声明 type 的 <button></button> 行为不一致：
- Chrome / Firefox / Safari：在
<form></form>内部默认为submit，外部默认为button - IE（含旧 Edge）：无论在哪，默认都是
button - W3C 规范明确要求显式声明，否则行为不可控
更麻烦的是：如果误把一个本该触发 JS 的按钮漏写 type，它可能在表单内偷偷提交，刷新页面，而你只看到“点了没反应”——其实已经跳走了。
type="submit" 和 type="button" 的关键区别
两者语义和原生行为完全不同，不能靠 JS 绑定 click 就混用：
立即学习“前端免费学习笔记（深入）”；
-
type="submit"会自动收集同级<form></form>内所有带name的可提交控件（<input>、<select></select>、<textarea></textarea>），并按method和action提交 -
type="button"完全静默，不触发任何表单行为，必须手动绑定onclick或addEventListener('click', ...) - 哪怕你给
type="submit"加了preventDefault()，它的默认语义仍在 —— 比如屏幕阅读器仍会读作“提交按钮”
示例：一个搜索框旁的“清空”按钮，如果写成 <button onclick="clearInput()">清空</button>，且它在 <form></form> 里，就会提交表单。正确写法是 <button type="button" onclick="clearInput()">清空</button>。
type="reset" 不是“清空”，而是“还原初始值”
很多人以为 type="reset" 是把输入框变为空字符串，其实它还原的是 DOM 加载时的 value 值（不是 defaultValue，也不是 placeholder）：
- 如果
<input value="张三">，用户改成了“李四”，点 reset 会回到“张三” - 如果
<input>没设value，初始值为空，reset 后就是空 - 它不会重置通过 JS 动态设置的
value，除非那个值恰好和初始 DOM 一致 - 它只作用于直属父
<form></form>内的控件，跨 form 无效
注意：type="reset" 很少用于现代交互设计，因为“还原到加载状态”往往不符合用户预期，容易引发困惑。
其他值（比如 type="click"）会被怎么处理？
type 属性只认三个合法值：submit、reset、button。其余均属非法：
- 在
<form></form>内：非法值（如type="click"、type=""）会被当作submit处理 - 在
<form></form>外：非法值会被降级为button - 这种降级不可预测，尤其在混合使用框架（如 React 渲染后动态插入 button）时更易出错
最稳妥的做法：所有 <button></button> 都显式写上 type，且只用这三个值。别依赖浏览器猜你想要什么。
