不写type属性的button在form内默认为submit，会触发表单提交并刷新页面；必须显式设为type="button"以避免干扰，尤其在非提交按钮场景。
不写 type 就默认提交，这是最常踩的坑
浏览器对 <button> 的 type 属性有明确默认值：不声明时一律当 type="submit" 处理。哪怕按钮在 <form> 外面，某些旧版 Safari 或 IE 仍可能尝试向上查找最近的表单并触发提交——结果页面刷新、AJAX 中断、数据丢失。
正确做法只有三条：
- 纯交互按钮（比如弹窗、折叠菜单、调用
fetch）必须显式写type="button" - 要提交表单的按钮，写
type="submit"，别依赖默认值 -
type="reset"极少需要，一旦误点无法撤回，慎用
常见错误现象：Uncaught TypeError: Cannot read property 'submit' of null，往往不是 JS 找不到 form 元素，而是按钮没加 type="button"，浏览器试图提交一个根本不存在的 <form>，然后 JS 里又去查 document.querySelector('form') 得到 null。
name 属性不是装饰，它决定后端能不能收到值
name 在 <button> 上不是可有可无的标识符。它直接参与表单序列化：当 type="submit" 按钮被点击，它的 name 和 value 会作为键值对发往服务器。比如 <button name="action" value="delete">删除</button> 提交后，后端收到的就是 action=delete。
立即学习“前端免费学习笔记（深入）”；
注意两个关键点：
- 多个按钮可以共用同一个
name（如筛选按钮组），靠value区分意图 - 如果按钮没写
name，即使有value，也不会出现在提交数据中——后端收不到这个字段 -
name值不能含空格或特殊字符，否则 URL 编码后可能出错；推荐只用字母、数字、下划线
type 和 name 组合使用的典型场景
实际开发中，type 和 name 往往配合解决具体问题：
- 单页应用里多个操作按钮共用一个表单：所有按钮设相同
name="op"，不同value（如"save"、"publish"、"draft"），后端通过op字段判断动作类型 - 避免重复提交：点击后立即
button.disabled = true，但必须保留name和value，否则禁用状态下该按钮的值不会提交 - 动态按钮（如表格行内操作）：用 JS 生成时，确保每个
<button>都带type="button"和业务相关的name（如name="row_id"），再绑定事件读取event.target.name或dataset
别把 name 当成 JS 的 id 用——要用 ID 查元素，用 name 传数据。
兼容性和容易被忽略的细节
IE8 及更早版本不支持 <button> 的 value 属性（只读取按钮文本内容），但现代项目基本不用考虑。真正容易漏的是：
-
form属性：当按钮不在<form>内部时，可用form="myFormId"显式绑定目标表单，此时type="submit"仍有效 -
formmethod、formaction等属性仅对type="submit"生效，且会覆盖<form>的对应设置 - 用
disabled时，不要用setAttribute('disabled', '')，直接赋值button.disabled = true更可靠
name 和 type 看似简单，但组合错误会导致表单行为不可控、后端接收不到预期字段、甚至引发静默失败——它们不是“写了就行”，而是必须按语义和上下文精确配置。
