button类型有哪些 _submit reset button区别详解

HTML 中 button 的 type 属性仅有 submit、reset、button 三种合法取值，三者语义与行为截然不同：submit 触发表单提交，reset 还原表单初始状态，button 则完全静默、需手动绑定事件；不写 type 或使用非法值将导致浏览器按环境（表单内外）和版本（如 IE 与其他现代浏览器）产生不可预测的默认行为，极易引发“点击刷新”“清空失效”“样式错乱”等常见翻车问题；掌握这三者的本质区别、默认降级逻辑及样式控制技巧，是写出健壮、可维护表单交互的关键一步。

button 的 type 属性只有三个合法值

浏览器只认 type="submit"、type="reset"、type="button" 这三种，其他值（比如 type="click" 或空字符串）会被当作 type="submit" 处理（在表单内）或降级为 type="button"（在表单外），行为不可靠。

不写 type 属性时，不同环境默认值不同：

• 在
  内部：Chrome/Firefox/Safari 默认是 submit，IE 默认是 button
• 在 外部：所有现代浏览器都按 button 处理
• 不存在默认 reset 的情况 —— 不显式写 type="reset" 就不会重置表单

submit 和 reset 会触发原生表单行为，button 不会

type="submit" 点击后会收集当前 内所有可提交控件（name 非空的 input、select、textarea 等），按 method 和 action 提交；type="reset" 会把所有表单控件还原为初始 value 或空值（注意：不是 defaultValue，而是页面加载时 DOM 中的值）。

type="button" 完全静默，不参与表单生命周期，必须手动绑定 onclick 或 addEventListener('click', ...) 才能干活。

常见翻车点：

• 本想做个纯 JS 按钮，却漏写 type="button"，结果点了就刷新/跳转
• 用 type="reset" 清空表单，但某些字段是 JS 动态设置的 value，重置后不变（因为没写进初始 HTML）
• 在单页应用（SPA）里用 type="submit" 却没 event.preventDefault()，导致整页 reload

submit/reset/button 在样式和语义上必须区分对待

三者功能截然不同，用户需要一眼识别意图。CSS 属性选择器是最直接的控制方式：

input[type="submit"], button[type="submit"] {
  background: #4CAF50;
  color: white;
  font-weight: bold;
}
input[type="reset"], button[type="reset"] {
  background: #FF9800;
  color: white;
}
input[type="button"], button[type="button"] {
  background: #2196F3;
  border: 1px solid #1976D2;
}

关键细节：

• button[type="submit"] 权重是 10，若同时有 class（如 .btn），需确保属性选择器不被覆盖，建议写成 .btn.btn-submit 或提高 specificity
• button 可以嵌套 HTML（图标、span），input 不行；所以对复杂按钮结构，优先用 button
• 禁用状态统一处理：button:disabled, input:disabled，但注意 button[type="submit"]:disabled 要显式写，否则可能被通用规则漏掉

为什么不要混用 input[type=submit] 和 button[type=submit]

两者都能提交，但底层差异影响维护性：

• input[type="submit"] 是自闭合标签，文字靠 value 属性，无法加图标、换行、富文本
• button[type="submit"] 是容器标签，内容可任意组合，语义更清晰，样式更可控
• input 提交时会把自身 name 和 value 当作表单字段发出去（比如 <input name="btn" value="确认"> 会多传一个 btn=确认），而 button 默认不提交自身值（除非显式写了 name）
• 部分老项目还残留 IE 兼容逻辑，input 的 focus/outline 行为不如 button 稳定

实际开发中，只要不用 input 做按钮，就能避开大多数表单交互的隐性坑 —— 尤其是那个“点了就跳转却找不到原因”的问题，八成出在没写 type="button" 上。

以上就是《button类型有哪些 _submit reset button区别详解》的详细内容，更多关于的资料请关注golang学习网公众号！