button标签必须显式声明type属性，否则在Chrome等浏览器中默认为submit导致意外提交表单，而IE11则默认为button，造成兼容性问题。
button 标签不是“能用就行”，而是“不显式写 type 就容易翻车”。它默认行为因浏览器而异：IE 当作 button，其他主流浏览器（Chrome/Firefox/Safari）当 submit —— 意味着只要它在 <form></form> 里，点一下就可能意外提交表单。
为什么
省略 type 时，W3C 规范明确要求默认为 submit，但 IE 旧实现是 button。这种不一致会导致：表单内一个没加 type 的 <button>测试</button>，在 Chrome 里直接提交，在 IE11 里却啥也不干——调试时很难联想到是这个原因。
真实踩坑场景包括：
- 用
<button>删除</button>绑定 JS 删除逻辑，结果点了反而刷新页面或跳转 - 模态框里的「取消」按钮没写
type="button"，关不掉还把表单发走了 - 组件库封装按钮时漏传
type，下游项目批量出现误提交
button和input[type=button]到底选哪个
button 和 <input type="button"> 功能重叠，但差异很实在：
立即学习“前端免费学习笔记（深入）”；
-
button支持子元素：<button type="button"><i class="icon-close"></i> 关闭</button>可以塞图标、<strong></strong>、甚至<img alt="HTML中的button标签怎么用？" >；input只能靠value属性，纯文本 -
input在表单序列化时更稳定：某些老框架或后端解析器对button的name/value提交行为有歧义（比如未点击的button是否参与提交），而input行为统一 - 无障碍支持上，
button原生语义更强，配合aria-label更易读；input需额外处理
结论：日常交互按钮（带图标、需要样式定制）优先用 button；纯表单操作且需最大兼容性（如银行类老系统）可考虑 input。
form属性和formXXX系列覆盖行为怎么用
button 的 form 属性允许它脱离 <form></form> 标签嵌套结构，直接关联指定表单：
<form id="myForm" action="/save"> <input name="title"> </form> <button type="submit" form="myForm">提交到 myForm</button>
配套的 formaction、formmethod、formtarget 能临时覆盖表单本身的设置。例如：
-
<button type="submit" form="myForm" formaction="/preview" formtarget="_blank">预览</button>—— 不改表单本身，只让这个按钮走预览接口并在新页打开 -
formnovalidate可绕过 HTML5 表单校验，适合「暂存草稿」按钮
注意：form 属性值必须匹配目标 <form></form> 的 id，不能是 class 或 name；且仅对 type="submit" 或 type="reset" 生效。
移动端和可访问性容易忽略的点
两个实际影响体验的细节：
- iOS Safari 对
button的touchstart响应有 300ms 延迟，若需快速反馈（如游戏控制按钮），得加cursor: pointer+-webkit-tap-highlight-color: transparent，或用ontouchstart事件手动触发 - 屏幕阅读器会把
<button>提交</button>读作「提交按钮」，但如果内容是图标+空格（如<button><span aria-hidden="true">✕</span><span class="sr-only">关闭</span></button>），必须确保sr-only文本存在且非空，否则读出来是「按钮」二字，用户完全不知道功能
最常被跳过的动作：给所有 button 加 type，哪怕只是 type="button"；检查是否在 form 内、是否真需要提交行为；别依赖默认值赌浏览器一致性。
