input 框默认值就是页面刚加载完成的时候输入框里面预先显示的文字内容，前端开发里面主要分成两种实现方式，第一种是 html 原生 value 属性直接写死静态默认值，第二种是通过 JavaScript 在页面加载之后动态写入默认值，这里一定要区分默认值和占位提示 placeholder，placeholder 只是灰色提示文字，用户一旦输入内容就会消失，它不属于真正的默认值，表单提交的时候 placeholder 的值不会被提交，而 value 里面的默认值是真实存在的表单数据，表单提交会带上这个内容，很多新手容易把两者混淆，业务开发的时候，如果需要用户打开页面就已经填充好内容，并且表单提交要携带这个内容，就必须使用 value 设置 input 框默认值，如果只是做提示，不需要提交数据，才使用 placeholder，同时还要考虑重置表单的场景，原生 form 的 reset 方法，会把 input 框恢复成初始的 value 默认值，而不是清空成空字符串，这个特性在表单编辑页非常关键，编辑回显页面经常需要在页面初始化的时候，把后端返回的数据写入 input 框默认值。
原生 html 静态设置 input 框默认值
直接在 input 标签内部添加 value 属性，这是最简单的静态写法，页面渲染的时候浏览器会自动把 value 里面的内容填充进输入框
基础写法示例
input type text value 张三
适用场景，内容固定不变，不需要后端接口动态返回，页面打开就固定显示这个内容
特点
页面源码里面就写好了默认值，不需要额外脚本，浏览器解析标签的时候自动完成填充
表单提交的时候，这个默认值会作为 input 的提交值
执行 form reset 重置的时候，输入框会回到这个 value 原始内容
补充，不同 type 类型都支持 value 默认值，比如 number 类型可以写数字默认值，password 类型可以写入密码默认值，hidden 隐藏 input 同样支持 value 默认值，用来传递隐藏参数
JavaScript 动态设置 input 框默认值
当默认值需要依赖接口数据或者页面计算结果，就需要使用 js 动态赋值，一般放在页面加载完成之后执行
常用实现方式
第一种 dom 原生方式 获取 dom 节点，修改 value 属性
document getElementById userInput value 李四
第二种 jquery 写法
userInput val 王五
第三种 vue 框架写法，通过 v-model 绑定，初始化 data 变量，这个变量的值就相当于 input 框默认值
第四种 react 框架写法，受控组件，state 初始值就是 input 框默认值
适用场景，编辑回显，根据上一页传参，接口请求成功之后填充，根据选择项联动修改默认值
关键点，动态赋值一定要等待 dom 渲染完成再执行，不然获取不到 input 节点，赋值会失效，vue 和 react 这类框架不需要手动操作 dom，直接修改绑定的响应式初始变量即可。
input 框默认值和 placeholder 核心对比表格
| 对比项 | input 框默认值 value | placeholder 占位提示 |
|---|---|---|
| 是否真实表单数据 | 是，表单提交携带该内容 | 否，不会随表单提交 |
| 用户输入之后 | 原有默认值可以被覆盖 | 一旦输入文字提示立刻消失 |
| reset 重置行为 | 恢复初始 value 默认值 | 不受 reset 影响，本身只是提示 |
| 显示样式 | 正常文字颜色 | 默认灰色浅色 |
| 业务用途 | 回显编辑数据 固定填充 | 输入引导提示 |
进阶要点与常见坑
第一点 表单 reset 的特性，很多开发者误以为 reset 会清空输入框，实际上原生 reset 是恢复标签初始 value 默认值，如果是 js 动态修改过 value，reset 不会恢复成动态修改之后的值，只会回到 html 标签原本写的初始默认值，这点是高频踩坑点，如果想要重置为空，需要手动写 js 把 value 设置为空字符串。
第二点 只读场景，如果 input 框设置 readonly，默认值依然可以正常显示，用户不能手动修改，但是表单依然可以提交这个默认值，如果设置 disabled，输入框默认值虽然还能看见，但是表单提交的时候这个 input 的值不会被提交。
第三点 类型校验，number 类型 input 框设置默认值的时候，尽量保证是合法数字，如果写入非数字内容，部分浏览器会出现校验异常。
第四点 缓存问题，浏览器自动填充会覆盖掉原本设置好的 input 框默认值，登录表单经常遇到，想要关闭自动填充可以给 input 添加 autocomplete off 属性。
第五点 双向绑定框架里面，如果初始化响应式变量为空，后面异步接口返回数据之后再赋值，这个属于异步回填，不属于页面初始加载的原生默认值，业务上一般也称为编辑默认值。
【常见问题】
问题 1 input 框默认值和 placeholder 有什么本质区别
回答 1 input 框默认值是 value 里面真实表单数据，表单提交会携带这个内容，placeholder 只是灰色提示文字，不属于真实数据，表单提交不会带上 placeholder 内容，用户输入之后 placeholder 就消失，而 input 框默认值可以保留并且被用户修改覆盖。
问题 2 执行 form reset 之后 input 框默认值会变成什么
回答 1 执行原生 form reset 之后，input 框默认值会恢复成 html 标签最开始写的 value 初始内容，如果是后续 js 动态修改的 value，reset 不会保存动态修改的值，只会回到标签原始的 input 框默认值。
问题 3 vue 里面怎么设置 input 框默认值
回答 1 vue 里面设置 input 框默认值不需要直接操作 dom，在 v-model 绑定的 data 或者 ref 响应式变量里面初始化赋值，这个初始变量的值就是 input 框默认值，页面渲染之后输入框就会自动填充这个初始内容。
【免责申明】
本文 input 框默认值相关内容基于标准 html 规范和主流前端框架通用原理讲解，不同浏览器内核以及框架版本在自动填充表单重置细节上可能存在细微差异，业务开发请结合实际项目测试，本文仅作为前端学习参考，不保证兼容所有老旧浏览器。