HTML的value attribute是初始值，JS的value property是当前值，二者不同步会导致重置异常、框架失效等问题；attribute仅首次解析生效，property反映实时状态。
直接在 <input> 标签里写 value 属性，就是浏览器认的初始值；JS 用 el.value 读写的是当前值（property），和 HTML 的 value attribute 不是一回事——混用会导致重置异常、框架失效、提交为空等典型问题。
value attribute 和 value property 到底差在哪
HTML 中的 value 是一个 attribute（属性），只在页面首次解析时起作用；而 JS 操作的 el.value 是一个 property（属性），反映的是用户当前输入或脚本实时设置的状态。两者长期不同步是绝大多数表单 bug 的根源。
-
el.getAttribute('value')返回原始 HTML 写死的值（比如"张三"），哪怕你已用 JS 改过十次，它也不变 -
el.value返回当前输入框显示的内容，包括用户手动输入、JS 赋值后的结果 - 点
<input type="reset">或调用form.reset()，恢复的是getAttribute('value')的值，不是el.value - 服务端模板渲染时若没转义引号（如 Jinja2 忘加
|e），value="{{ user.name }}"可能崩成value="张"三"，导致 HTML 解析截断
不同 input type 下 value 的实际作用
value 在不同 type 下语义完全不同，硬套“都是默认值”会踩坑。
-
type="text"/"password"/"hidden"：attribute 表示初始值；property 表示当前内容；提交时发的是 property 值 -
type="checkbox"/"radio"：value attribute 是必须写的，它决定提交给后端的字段值（如value="v1"），但是否勾选由checked或defaultChecked控制 -
type="submit"/"button"/"reset"：value attribute 控制按钮上显示的文字，和表单数据无关 -
type="file"：不支持valueattribute 设置初始值（出于安全限制），JS 也无法通过赋值模拟选择文件
JS 动态设值时怎么避免被覆盖或失效
从 URL 参数、localStorage 或 API 填初始值，时机和方式不对，值会被框架或浏览器行为抹掉。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须等 DOM 就绪：用
DOMContentLoaded或document.querySelector确保元素存在，别在<script>标签里直接执行document.getElementById(...).value = ... - React/Vue 场景下禁止直接 DOM 操作：受控组件中改
el.value会被框架下一次 render 覆盖；应走 state 或v-model - 非受控组件可用
defaultValue，但它只生效一次——后续 props 更新不会同步到输入框，别指望它响应式 - Safari 隐私模式下
localStorage.getItem可能抛SecurityError，必须包try/catch，且 fallback 到''，否则null会变成字符串"null"显示出来
textarea、select、checkbox 的初始值写法容易错
它们不靠 value attribute 统一处理，各自有约定俗成的初始化方式。
-
<textarea>：没有valueattribute，初始值写在标签体内（<textarea>默认内容</textarea>），JS 设值用el.value，但重置时恢复的是 innerText，不是 attribute -
<select>：依赖<option selected>，JS 改el.value不会自动高亮对应<option>；要同步更新，得设el.selectedIndex或遍历el.options找匹配项并设selected = true -
<input type="checkbox">：仅设value="on"不代表勾选；必须显式加checked或 JS 设el.checked = true；重置时只认defaultChecked，不是checked
最常被忽略的是：表单重置逻辑完全绕过 JS 状态，只认 HTML attribute 和 selected/checked 这类静态标记。一旦你用 JS 改了 el.value 却没同步更新对应 attribute 或标记，reset 就会“失灵”。
