value属性用于设置表单真实提交值，placeholder仅作提示不参与提交；input/textarea用value属性或标签内文本预填，select靠selected标记默认项；服务端渲染直接写value，js动态设置须操作dom property而非attribute。
value属性填的是真实提交值，placeholder只是提示文字
表单控件的 value 是用户未手动修改时默认提交的数据；而 placeholder 只是灰色提示语，不参与提交，且焦点进入输入框后自动消失。常见错误是把预填内容写在 placeholder 里，结果表单提交为空——因为浏览器根本不会把 placeholder 当成值发给后端。
适用场景：编辑已有数据（如用户资料页）、搜索框带默认关键词、登录页记住用户名等需要“真实初始值”的情况，必须用 value。
input、textarea、select 的 value 预填写法不同
input 和 textarea 直接写 value 属性即可，但 textarea 的值要写在开始和结束标签之间，不能用 value 属性：
<input type="text" name="username" value="张三"><textarea name="bio">个人简介已填写</textarea><select name="role"><option value="admin">管理员</option> <option value="user" selected>普通用户</option></select>
注意 select 没有 value 属性，靠 selected 标记默认选项；若用 JS 动态设置，应操作 select.value = "user"，而不是改 option.selected。
服务端渲染 vs 前端 JS 设置 value 的时机差异
服务端直接输出 HTML 时，value 写死最稳妥；但若用 JS 动态填充（比如从 localStorage 读取），必须等 DOM 加载完成再赋值，否则可能被后续框架（如 Vue/React）覆盖或触发两次渲染。
- 纯 HTML 页面：直接写
value="xxx"即可 - JS 填充：用
document.getElementById("name").value = "xxx"，别用.setAttribute("value", "xxx")—— 后者只改 HTML 属性，不更新实际 input 的当前值（DOM property） - Vue/React 中：不要直接操作 DOM 的
value，应通过响应式数据驱动（如v-model或useState）
placeholder 不该用来“模拟预填”，尤其涉及表单验证时
很多开发者用 placeholder="邮箱地址" 代替 label，再加个 required，结果用户一点击就清空，又没输内容，提交时报错——因为 placeholder 不是值，验证时字段仍为空。
更隐蔽的问题：屏幕阅读器会把 placeholder 当作辅助文本朗读，但不会把它当作字段当前值；如果真要“预填”，就必须让 value 存在且非空（哪怕只是空格也要小心，某些后端 trim 后变空）。
真正需要“占位提示+默认值”并存？那就同时写：<input value="example@domain.com" placeholder="请输入邮箱">——但得确认这个默认值业务上允许提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
