html的value属性仅设初始值，不随用户输入更新；js的element.value才是实时值，getattribute('value')读的是静态html快照，而element.value反映浏览器动态维护的真实内容。

HTML 中 value 属性只控制初始值，不反映用户输入后的当前值；想获取或设置实时内容，必须用 JavaScript 的 value 属性（非 HTML 属性）。

为什么 value 属性设了却没变？

常见错觉：给 <input type="text"> 写了 value="hello"，再用 JS 改了输入框内容，之后又读取 element.getAttribute('value')，发现还是 "hello" —— 这是因为：

• getAttribute('value') 读的是 HTML 源码里写的初始值，属于“反射属性”，不会随用户操作更新
• 元素的 value JS 属性（即 element.value）才是运行时真实值，它由浏览器动态维护
• 二者在首次渲染后就分道扬镳：HTML value 是快照，JS value 是活态

value 属性和 value JS 属性的区别

同一个词，两个世界：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• HTML value 属性：只在元素创建时影响初始状态；后续修改它（如 setAttribute('value', 'x')）对已渲染的输入框无视觉或行为影响
• JS value 属性：element.value 读写的是当前实际内容；赋值会立即更新显示（对 text/password/hidden 等有效）
• 特殊例外：checkbox 和 radio 的 JS value 属性始终是其 HTML value 值（即提交时发出去的字符串），而是否选中由 checked 属性控制

下拉框（select）里的 option.value 怎么用？

这里容易混淆三层 value：

• <select></select> 元素自身的 value JS 属性：等价于当前选中 <option></option> 的 value 属性值（若该 option 没设 value，则取其文本）
• <option value="a">Apple</option> 的 value 属性：仅用于表单提交和 JS 读取，不影响显示文本
• option.value JS 属性：读出来就是上面那个 HTML value 值；但写它（option.value = 'b'）会改 HTML 属性，也影响后续提交
• 注意：select.value 是只读的“合成值”，不能直接赋值来切换选项；要改选中项，得操作 select.selectedIndex 或 option.selected = true

什么时候必须用 JS value 而不是 HTML value？

几乎所有交互场景都依赖 JS value：

• 表单校验：检查用户实际输了什么 → 用 input.value.trim() !== ''
• 实时搜索：监听 input 事件，读 event.target.value
• 受控组件（React/Vue）：把 input.value 绑定到状态，每次输入都触发重渲染
• 还原输入内容（比如编辑页回填）：应赋值给 input.value，而非 setAttribute('value', ...)，否则光标可能跳到开头

真正需要操作 HTML value 属性的场合极少，典型只有服务端渲染生成初始值、或调试时查看原始声明。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！