<input type="button"> 创建的按钮默认无任何行为，必须通过 onclick 或 addEventListener 手动绑定 JavaScript 才能响应点击，它不提交表单、不具语义化、不支持嵌套内容，且 name 属性无效；推荐优先使用语义更强、扩展性更好的 <button> 元素。
怎样用 <input type="button"> 创建可点击但不提交的按钮
直接说结论：<input type="button"> 确实能创建一个普通点击按钮，但它**没有默认行为、不触发表单提交、也不自带语义化交互逻辑**——它只是个“空壳”，必须配合 onclick 手动绑定 JS 才能响应点击。
常见错误现象：写了 <input type="button" value="点我">，页面上按钮显示正常，但点了没反应。这不是 bug，是预期行为——HTML 标准里它天生就「什么也不做」。
- 使用场景：适合轻量交互，比如展开/收起区域、切换标签页、触发简单 JS 计算（如格式化输入值）
- 参数差异：
value控制按钮文字，disabled可禁用，但**不能用name提交数据**（和submit或reset不同） - 兼容性无问题，所有浏览器都支持；但语义弱于
<button>，屏幕阅读器识别度略低
为什么推荐优先用 <button> 而不是 <input type="button">
<button> 和 <input type="button"> 表面功能一致，但实际差异明显：
-
<button>支持嵌套 HTML（比如加<img>或<span>），<input>只能靠value显示纯文本 -
<button>在表单中默认不会触发表单提交（除非显式设type="submit"），这点反而更安全 -
<input type="button">在 IE8 及更早版本中对disabled样式支持不一致，<button>更稳定 - 现代框架（如 React）中，
<button>的事件委托和 ref 绑定更直观，<input>容易因value双向绑定出错
onclick 绑定时容易踩的坑
给 <input type="button"> 加交互，最常用方式是内联 onclick，但这里有几个隐性雷：
- 函数名拼错或未定义 → 控制台报
Uncaught ReferenceError: xxx is not defined，按钮静默失效 - 忘记加括号导致函数不执行：
onclick="handleClick"（只传引用）≠onclick="handleClick()"（才调用） - 在 Vue/React 等框架中混用内联
onclick，可能绕过响应式系统，导致状态更新不触发视图刷新 - 如果按钮在动态渲染的列表里，用内联写法很难传参，建议改用
addEventListener或框架绑定语法
示例对比：
<!-- ❌ 内联写法脆弱，难维护 -->
<input type="button" value="计算" onclick="calcTotal()">
<p><!-- ✅ 推荐：用 id + JS 分离逻辑 -->
<input type="button" id="calcBtn" value="计算">
<script>
document.getElementById('calcBtn').addEventListener('click', calcTotal);
</script>表单里混用时要注意提交干扰
虽然 type="button" 本身不提交，但如果它在 <form> 内部，且你同时用了 <input type="submit"> 或 <button>（未设 type），某些旧浏览器可能把后者默认当 submit 处理，意外触发提交。
- 明确给所有
<button>设type="button"，避免歧义 - 不要依赖「没写 type 就安全」——HTML 规范规定
<button>默认type="submit" - 如果按钮要提交数据，别硬套
type="button"+ JS 模拟 submit，直接用type="submit"并用event.preventDefault()控制流程更清晰
真正复杂的状态管理或异步操作，type="button" 很快会暴露局限：它无法表达 loading 状态、不可访问性属性（如 aria-busy）也得手动补全。这时候该换方案了，而不是堆砌 patch。
