优先用 。它语义清晰、内容自由、默认可聚焦可键盘操作； 仅支持纯文本且易误触发 submit，表单内必须显式设置 type 属性，禁用状态应使用 disabled 属性而非 css 模拟。
HTML 中 <button></button> 和 <input type="button"> 用哪个？
优先用 <button></button>。它语义清晰、内容自由（能放文字+图标+<img alt="html按钮怎么写_表单button按钮创建方法【交互】" >）、默认可聚焦可键盘操作，而 <input type="button"> 只能塞纯文本，且在某些老浏览器里 submit 行为容易误触发。
常见错误现象：<input type="button"> 被塞进表单后，回车意外提交；或者想加 SVG 图标失败，只能靠 CSS 拼贴。
- 表单内触发 JS 逻辑（如弹窗、校验）→ 用
<button type="button"></button> - 提交表单 → 用
<button type="submit"></button>（比<input type="submit">更易样式化） - 重置表单 → 用
<button type="reset"></button>，但注意：用户极少需要这个，多数项目直接删掉
为什么 type 属性不能省？
不写 type 时，<button></button> 在表单中默认是 type="submit" —— 这是最常踩的坑。点一下就刷新页面或发请求，JS 还没绑上就跑了。
使用场景：你在 Vue/React 里动态渲染按钮，忘了设 type，结果每次点击都触发父表单提交，控制台没报错，但逻辑断了。
立即学习“前端免费学习笔记（深入）”；
- 只要按钮不在表单里，
type省略影响不大（但建议仍显式写上，避免协作误解） - 在表单里，必须明确写
type="button"/type="submit"/type="reset" -
type="submit"不会自动验证表单，除非<form></form>有novalidate才跳过，否则浏览器原生校验仍会拦截
按钮禁用状态怎么写才可靠？
用 disabled 属性，不是 class="disabled" 或 CSS pointer-events: none。后者只是视觉屏蔽，键盘仍可 focus，屏幕阅读器也读不到状态变化。
性能影响：禁用的 <button disabled></button> 自动移出 tab 顺序、不响应任何事件、不触发表单提交 —— 浏览器原生保障，不用 JS 拦截。
- JS 控制时，直接操作
btn.disabled = true，别只改 class - 服务端渲染或 SSR 场景下，初始状态就该带
disabled属性，别等 JS 加载完再设 - 别用
aria-disabled="true"替代disabled：它只影响读屏，不阻止交互
按钮点击后没反应？先查这三件事
不是 JS 写错了，大概率是 HTML 层就卡住了。
- 按钮是否被
position: absolute移出可视区，或被其他元素z-index盖住？用浏览器「检查元素」看实际点击区域 - 父容器有没有
pointer-events: none？这个属性会透传点击，子元素再设pointer-events: auto也无效 - 按钮在
<form></form>里又没写type，点了直接提交并刷新 —— 打开 Network 面板，看有没有发请求就知道了
复杂点在于：这些限制都不是 JS 能绕过的，得从 HTML 结构和 CSS 层级一层层剥。很多人调半天事件监听，其实按钮压根没被点到。
