文本框的value是实时数据载体，页面加载时决定初始值，用户输入后动态更新；按钮的value仅控制显示文字，不参与表单提交。
文本框的 value 是用户输入内容的实时载体
它既管初始值，也管当前值。页面加载时，value 属性决定输入框里显示什么；用户敲字后，element.value 会动态更新为最新输入内容，但 getAttribute('value') 仍返回 HTML 中写的原始值——这是初学者常混淆的点。
常见错误现象：
• 表单提交后发现数据没变，其实是 JS 修改了 element.value，但没同步到后端逻辑
• 用 getAttribute('value') 判断用户是否修改过内容，结果永远是初始值
- 初始值写法：
<input type="text" name="email" value="user@example.com"> - JS 读取当前输入：
document.querySelector('[name="email"]').value - JS 设置新内容：
inputEl.value = "new@domain.com"（直接改 DOM 属性，不碰 HTML attribute）
按钮的 value 只控制按钮上显示的文字
对 type="submit"、type="reset"、type="button" 来说，value 不参与表单数据提交，只影响按钮文本。它和文本框的 value 完全不是一回事。
使用场景：
• 替换默认的“提交”“重置”文字
• 多语言界面中动态切换按钮文案
• 避免用 innerHTML 或 textContent 改按钮文字（兼容性更稳）
- 默认行为：
<input type="submit">显示“提交” - 自定义显示：
<input type="submit" value="确认下单"> - 注意：
value不会被当作表单字段提交，除非按钮本身有name属性（极少见）
为什么不能混用？容易踩的坑
最典型的问题是：给提交按钮加了 name="submit" 和 value="保存"，结果后端收到 submit=保存 ——这不是你想要的业务字段，而是按钮自身的提交标识。
性能与兼容性影响：
• 文本框频繁读写 value 是轻量操作，无性能顾虑
• 按钮的 value 在 IE8+ 全部支持，但若用 JS 动态设置，需确保 DOM 已就绪
- 别在按钮上依赖
value做业务判断，比如if (btn.value === '删除') { ... }——应改用data-action或 class - 文本框的
value为空字符串时，提交会发空值；按钮的value为空，显示就变成空白按钮，易被忽略 -
<textarea></textarea>没有value属性，它的内容写在标签体内，JS 读写用textarea.value，但 HTML 中不能写value="..."
value 在文本框里是“活的数据流”，在按钮里只是“死的标签”。搞不清这点，轻则文案错乱，重则后端多收一条无意义字段。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
