button的value属性仅在有name时参与表单提交，不控制显示文本；显示内容由标签内HTML决定，而input[type="button"]的value同时控制显示和提交值。
button 的 value 属性不控制显示内容
很多人写 <button value="提交">点我</button>，以为点击后表单会提交 "提交" 这个值——其实不会。button 的显示文本来自标签内 HTML（即 点我），value 属性只在表单提交时作为该按钮的提交值（且仅当它有 name 属性时才生效）。没设 name，value 就完全被忽略。
常见错误现象：
- 用
document.querySelector('button').value试图读取按钮上显示的文字 → 返回空字符串或默认值，不是你看到的文本 - 在表单里放多个
<button>，但都没设name→ 提交时根本不会带上任何 button 相关字段 - IE 旧版本会把
<button>提交</button>中的 “提交” 当作提交值，而 Chrome/Firefox 看的是value属性 → 跨浏览器行为不一致
input[type="button"] 的 value 同时控制显示和提交值
<input type="button" value="点我"> 的 value 是唯一决定按钮文字的属性，改它就等于改显示；如果它在表单中且有 name，提交时也用这个 value 作为字段值。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 纯 JS 触发逻辑、不参与表单提交 → 用
input[type="button"]更直白，value改了，按钮文字立刻变 - 需要动态切换按钮文案（比如“加载中…”）→ 直接
el.value = '加载中...'即可，不用操作 innerHTML - 老项目兼容 IE8 或需极简 DOM 结构 →
input比button更少意外
表单提交时，value 是否起作用取决于有没有 name
无论 button 还是 input[type="submit"]，只要没设 name，它的 value 就不会出现在提交数据里。这是最容易漏掉的一环。
参数差异：
-
<button name="action" value="save">保存</button>→ 提交 { action: "save" } -
<button name="action" value="delete">删除</button>→ 提交 { action: "delete" } -
<button value="delete">删除</button>→ 提交时无action字段 -
<input type="submit" name="cmd" value="登录">→ 提交 { cmd: "登录" }
图标/富文本按钮必须用 button，但别依赖 value 显示
想在按钮里放 <i class="icon-save"></i> 保存 或图片？只能用 <button>，因为 input 不允许嵌套内容。这时 value 完全无关显示，只是提交备用值。
容易踩的坑：
- 给
<button>设了value却忘了设name→ 前端看着正常，后端收不到字段 - 用
innerHTML更新含图标的button文案 → 图标节点可能被覆盖，应只更新文本节点或用 class 控制状态 - 用 jQuery 的
.val()读写button→ 在 IE 下返回 innerText，在现代浏览器返回value属性值 → 统一用.getAttribute('value')或直接操作textContent
value 是个“隐藏开关”，只在表单提交路径里起效；而 input 的 value 是“可见接口”，既管显示又管数据。混用时最常出问题的地方，不是语法错，而是忘了 name 这个触发条件。 
