### [input 的 value 默认值：属性与特性两回事](https://www.huociguo.com/article/1769)

**Published:** 2026-10-02T10:06:21

**Author:** 米了

**Excerpt:** 给输入框写默认值，第一反应是 value 属性。写上去生效了，脚本里改了 value 却不生效，或者重置按钮行…

给输入框写默认值，第一反应是 value 属性。写上去生效了，脚本里改了 value 却不生效，或者重置按钮行为古怪，问题都出在「属性」与「特性」被当成了同一个东西。

![正在填写表单的人](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-7821934.jpeg)

默认值与当前值是两条独立的轨道。图片来自 Pexels。

## 两套 value

HTML 里的 value 是特性，决定初始值与重置目标。DOM 里的 value 是属性，反映当前输入。页面加载时特性灌进属性，之后两者各走各的：输入只改属性，特性纹丝不动。

## 静态默认值

<input name="city" value="北京">

最直接的写法，提交时若未修改，服务端收到的就是这个值。

## 动态设置

el.value = '上海';
el.setAttribute('value', '上海');

第一行改当前值，立刻可见，但不影响重置行为。第二行改特性，决定 reset 之后回到哪里。只写第二行不改第一行时，已交互过的输入框不会有任何变化。

## 重置的真实逻辑

reset 按钮把每个控件恢复到特性定义的初始值，不是清空。想清空应该遍历控件赋空串，或者换用 button 加脚本处理。

## 框架场景

React 等框架里直接操作 value 会与虚拟 DOM 状态脱节，输入被框架回写覆盖。受控组件模式把值交给状态管理，输入框只是状态的投影，默认值随之变成状态的初始值问题。

**Tags:** DOM属性, value属性, 受控组件, 表单重置, 默认值

**Categories:** HTML5

---