HTML元素value属性在按钮上和在输入框中有什么区别-html教程-PHP中文网

button的value属性仅在有name时参与表单提交，不控制显示文本；显示内容由标签内html决定，而input[type="button"]的value同时控制显示和提交值。

html元素value属性在按钮上和在输入框中有什么区别

button 的 `value` 属性不控制显示内容

很多人写 <button value="提交">点我</button>，以为点击后表单会提交 "提交" 这个值——其实不会。button 的显示文本来自标签内 HTML（即 点我），value 属性只在表单提交时作为该按钮的提交值（且仅当它有 name 属性时才生效）。没设 name，value 就完全被忽略。

常见错误现象：

用 document.querySelector('button').value 试图读取按钮上显示的文字 → 返回空字符串或默认值，不是你看到的文本
在表单里放多个 <button></button>，但都没设 name → 提交时根本不会带上任何 button 相关字段
IE 旧版本会把 <button>提交</button> 中的 “提交” 当作提交值，而 Chrome/Firefox 看的是 value 属性 → 跨浏览器行为不一致

input[type="button"] 的 `value` 同时控制显示和提交值

<input type="button" value="点我"> 的 value 是唯一决定按钮文字的属性，改它就等于改显示；如果它在表单中且有 name，提交时也用这个 value 作为字段值。

使用场景：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

纯 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></button>，因为 input 不允许嵌套内容。这时 value 完全无关显示，只是提交备用值。

容易踩的坑：

给 <button></button> 设了 value 却忘了设 name → 前端看着正常，后端收不到字段
用 innerHTML 更新含图标的 button 文案 → 图标节点可能被覆盖，应只更新文本节点或用 class 控制状态
用 jQuery 的 .val() 读写 button → 在 IE 下返回 innerText，在现代浏览器返回 value 属性值 → 统一用 .getAttribute('value') 或直接操作 textContent