button默认type为submit，需显式设type="button"防误提交；disabled属性真禁用，css模拟无效；data-属性命名须合规，dataset读取自动驼峰转换；button标签比input[type=button]语义强、功能全。
button 默认 type 是 submit，不写就容易误提交
在 <form></form> 里放一个裸 <button></button>，没加 type 属性，点一下页面就刷新或发请求——这不是 bug，是规范行为。浏览器默认把它当 type="submit" 处理。
解决方法很简单：显式声明 type 值：
- 纯 JS 触发（比如弹窗、切换状态）→ 用
type="button" - 要提交表单 → 用
type="submit"，且确保它在<form></form>内部 - 要重置字段 → 用
type="reset"，同样需在表单内才生效
别依赖 onclick 阻止默认行为来“补救”，那只是掩盖问题。表单提交是同步的，JS 还没加载完用户就点了，照样跳走。
disabled 属性才是真禁用，CSS 模拟全是假的
disabled 不只是视觉灰掉，它会：
– 从表单提交中排除该控件
– 阻止所有事件（click、focus、keydown 等）
– 被屏幕阅读器识别为不可操作
而只用 CSS 加 opacity: 0.5 或 pointer-events: none：
- 键盘用户仍可
Tab进去，按回车触发逻辑 - 表单提交时该按钮的
name/value依然会被发送（如果它有这些属性） - 无障碍支持完全失效
所以，状态控制必须靠 JS 切换 disabled 属性本身：btn.disabled = true 或 btn.setAttribute('disabled', '')，别碰样式层。
data- 属性命名和读取有硬规则，dataset 不是万能的
想给按钮带额外上下文（比如 data-item-id="123" 或 data-action="delete"），得守这几条：
- 必须以
data-开头，后面只能是字母、数字、连字符、下划线；data-userId和data_user.id都非法 - 连字符自动转驼峰：
data-api-key→ JS 里读作dataset.apiKey，不是dataset["api-key"] - 值永远是字符串：
data-count="42"取出来是"42"，不是数字 - 首次设置新 data 属性，必须用
setAttribute()；dataset.newProp = 'x'不会生成 DOM 属性 -
dataset在 IE11 及更早版本不支持，生产环境要用getAttribute()降级
input[type=button] 和 button 标签的关键差异
两者都能当按钮用，但语义、能力和兼容性差得挺远：
-
<button></button>支持嵌套任意 HTML（图标、<svg></svg>、多行文字），<input type="button">只能靠value显示纯文本 -
<button></button>的disabled状态会阻止所有交互，<input>的disabled在部分旧 Android 浏览器里可能漏掉focus事件 -
<input type="button">兼容 IE6，但现代项目基本不用考虑；<button></button>是首选，语义清晰、样式可控性强 - 如果要用
<input>，记得设value，否则按钮上啥也不显示；<button></button>的内容直接写在标签中间就行
真正麻烦的从来不是怎么写，而是忘了 type、用了 disabled 的 CSS 替代品、或者以为 dataset 能随便新增属性——这些地方一错，调试起来比逻辑错误还难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
