value属性是浏览器唯一认可的“真实默认值”，决定初始显示、提交内容和form.reset()恢复目标；其他方式均不可靠，且需注意格式规范与转义。
value 属性是唯一被浏览器识别为“真实默认值”的方式，它决定初始显示、提交内容和 form.reset() 恢复目标。其他任何方式（如 placeholder、JS 设置 setAttribute、框架绑定前未初始化）都不可靠，尤其在重置或提交时会出问题。
input type="text" / "number" / "email" 等怎么设默认值
直接写 value 属性，字符串必须加引号，数字也要转成字符串：
-
value="123"✅；value=123❌（HTML 属性不加引号易解析失败） -
type="date"必须是YYYY-MM-DD格式，比如value="2026-09-21"；"21/09/2026"会被清空 -
type="number"只接受纯数字字符串：value="42"✅；value="42.5"✅；value="42,5"或value="42px"❌ - 服务端渲染时，用户数据必须 HTML 实体转义，否则
"或会破坏标签结构，例如原始值 <code>O'Reilly要输出为O'Reilly
checkbox 和 radio 的默认选中靠 checked，不是 value
checked 是布尔属性，只出现在需要默认激活的标签上，且无需赋值：
-
<input type="checkbox" name="agree" value="yes" checked>✅ -
<input type="radio" name="gender" value="male" checked>✅ -
checked="false"❌（浏览器把它当真值处理） -
value对 checkbox/radio 是必需的——没写的话，勾选后提交的是"on"，不是你想要的业务值
select 下拉框的默认选项用 selected，不是 select 上的 value
selected 必须写在 <option></option> 标签里，且只认第一个出现的：
立即学习“前端免费学习笔记（深入）”；
-
<select name="city"><option value="bj">北京</option> <option value="sh" selected>上海</option></select>✅ -
<select value="sh">...</select>❌（select元素本身没有value属性） - 动态生成时，后端传来的值必须与
<option value="..."></option>的字符串**完全一致**（大小写、空格、引号都不能差） - 如果
<option></option>没写value，浏览器会把标签内文本（比如<option>上海</option>）作为提交值，容易带空格或换行，建议始终显式写value
textarea 和 JS 动态赋值的特殊规则
textarea 的默认值不能靠 value 属性，必须写在起始和结束标签之间：
-
<textarea name="bio">这里是默认内容</textarea>✅ -
<textarea value="错"></textarea>❌（value属性被忽略） - JS 动态设置要用
el.value = "xxx"，不是el.setAttribute('value', 'xxx')—— 后者只改 HTML attribute，不影响当前输入状态 - 执行时机必须在
DOMContentLoaded之后，否则元素可能还没挂载 - 若输入框已由 Vue/React 管理，光改
el.value不够，还得触发事件：el.dispatchEvent(new Event('input', { bubbles: true }))
最容易被忽略的一点：表单重置（form.reset() 或 <button type="reset"></button>）永远只恢复到 HTML 初始 value、checked、selected 的值，而不是你后来用 JS 改过的 el.value。如果需要 JS 初始化 + 可重置，得自己存一份初始值到 dataset 或全局变量里。
