button默认type为submit，位于form内点击会触发表单提交导致页面重载，必须显式声明type="button"才能避免；type="reset"仅还原HTML初始value属性值，无法重置JS动态设置的值。
button 默认 type 是 submit，不写就等于要提交表单
很多页面一点击按钮就刷新或跳转，根本没触发 JS 逻辑，问题往往出在 type 没显式声明。浏览器对 <button> 的默认行为是 type="submit"，只要它在 <form> 内，点一下就会触发表单提交——哪怕 action 为空，也会导致页面重载。
必须写明 type="button" 才能彻底切断这个链路。这不是“可选优化”，而是防止误提交的底线操作。
- SSR 模板中若用变量拼接
<button type="{{btnType}}">，而btnType为空或未兜底，上线后该按钮实际就是type="submit" -
type="submit"触发的是form元素的submit事件，不是按钮自身的click；所以只在按钮上写onclick="event.preventDefault()"完全无效 - 想拦截提交，必须监听
form的submit事件并调用event.preventDefault()
type="reset" 不等于清空 input.value，它只认 HTML 初始值
用 <button type="reset"> 清搜索框，结果搜完再点“重置”，输入框还是上次 JS 设置的值？这是因为 reset 只还原 DOM 初始化时的 value 属性值，对运行时通过 input.value = "xxx"、useState 或 v-model 改变的状态完全无感。
例如：<input value="张三"> → reset 后变回 “张三”；<input>（没写 value）→ reset 后变为空字符串；但 JS 执行过 el.value = "李四" 后，reset 不会把它拉回来。
立即学习“前端免费学习笔记（深入）”；
- 需要真正清空，应该用
type="button"+ 显式 JS 赋值：el.value = "" - React/Vue 场景下，
reset基本不可用，必须走状态重置逻辑 -
type="reset"也不触发任何验证，它只是机械地“设回初始属性值”
input[type="button"] 和 button[type="button"] 的关键差异
二者都能做纯 JS 控制的按钮，但底层行为和扩展能力完全不同。
<input type="button"> 是自闭合标签，仅靠 value 显示文本，不能嵌套图标、SVG 或 span；语义弱，无障碍支持差；但它在 IE6–8 下也稳如老狗，兼容性是唯一优势。
<button type="button"> 支持任意 HTML 内容，可加 class/id/aria-*，支持 autofocus、form 属性跨表单绑定，还能用 formaction 覆盖提交地址——这些 input 都不支持。
- 现代项目一律优先用
<button type="button">，除非明确要兼容已淘汰的旧浏览器 -
input[type="button"]的name属性在表单提交时不会被序列化（因为不参与提交），纯属冗余 - 两者都支持
disabled，但button的禁用状态更易用 CSS 伪类:disabled精准控制样式
form 属性让 button 脱离表单结构也能关联 form
传统做法要求 <button type="submit"> 必须写在 <form> 标签内部才能生效。HTML5 引入了 form 属性，允许按钮放在文档任意位置，仍能绑定指定表单。
比如搜索框在 header，表单在 main 区域，只需给按钮加上 form="search-form"，再给 <form id="search-form">，就能让它精准控制那个表单。
-
form属性值必须是目标<form>的id，大小写敏感 - 配合
formaction、formmethod，同一个按钮可向不同后端地址提交（如“保存草稿” vs “正式发布”） - 注意：IE10+ 支持
form属性，IE9 及以下不支持，需降级处理
type 行为不是孤立的——它和所在上下文（是否在 form 内）、浏览器默认策略、JS 绑定时机都耦合紧密。最容易被忽略的，是以为「阻止了按钮 click 就等于阻止了提交」，其实 submit 是 form 生命周期里的独立事件，绕不开。 
