HTML原生表单默认值必须用value、checked、selected等属性设置，JS赋值会绕过form.reset()；框架中需确保绑定值类型与option value严格一致，否则默认选中失效。
HTML原生表单控件的默认值靠属性，不是JS赋值
HTML里设置默认值，value、checked、selected 是唯一可靠方式，浏览器在解析HTML时就按这些属性渲染并建立初始状态。用JS在DOMContentLoaded之后再写input.value = 'xxx'，虽然能显示，但会绕过表单重置（form.reset()）逻辑，用户点“重置”按钮时，输入框变空，而不是回到你JS设的那个值。
-
value只对<input type="text">等有效，对<textarea>无效——它的默认内容必须写在标签体内 -
selected必须写在<option>上，不是<select>上；多个selected只认第一个 -
checked是布尔属性，写checked或checked=""都行，但别写checked="false"——那反而会被当成真值 - 服务端渲染时，
value="{{ user.email }}"这类插值必须做HTML属性转义，否则"或<会导致标签提前截断
React中select默认值失效，大概率是value没匹配上option
React的<select value={state}>是受控组件，它完全无视HTML里的selected。如果state初始值是''，而第一个<option value="1">的值是字符串'1'，那下拉框就显示为空白——不是没选中，是根本找不到匹配项。
- 确保
useState初始值严格等于某个<option value="...">的value，包括类型：后端返回数字1，就得useState('1')而不是useState(1) - options异步加载时，别在data为空时就绑定
v-model或value，先用v-if或options.length > 0控制渲染时机 - 编辑页场景下，接口返回的字段值必须原样塞进state，不能用
?? ''兜底——万一后端允许空字符串作为合法选项，兜底就覆盖真实值
Vue里v-model绑定select，selected属性纯属摆设
Vue的v-model接管了<select>的值，HTML里写的selected在首次渲染后立刻被忽略。如果你看到默认选项没生效，不是DOM没加载完，而是data里绑定的变量压根没初始化，或者初始化的值和option的value不一致（比如一个是字符串'admin'，一个是对象{ id: 'admin' }）。
- 初始化
data时，直接给绑定字段赋值，例如selectedRole: 'admin'，不要留空字符串 - 用
v-for生成<option>时，确保:value绑定的值类型和v-model一致；避免:value="item"（对象）配v-model="stringId" - 调试时在控制台运行
document.querySelector('select').value，看浏览器实际值；再对比vm.selectedRole，两者不等说明绑定链断了
type="date"和type="number"的value格式错一点就变空
<input type="date">要求value必须是YYYY-MM-DD格式字符串，<input type="number">只接受纯数字字符串（不能带逗号、单位、空格）。格式不对，浏览器直接清空输入框，连placeholder都不显示。
立即学习“前端免费学习笔记（深入）”；
-
type="date"安全生成方式：new Date().toISOString().split('T')[0]，别用toLocaleDateString()——区域格式不可控 -
type="number"的value传数字要转字符串：value={String(price)}，否则React会警告且渲染失败 - 服务端传来的日期字段如果是
"2026-07-01T08:30:00Z"，前端取.split('T')[0]再塞进value，别直接用整个ISO字符串 - 用户可能手动输入非数字字符，
type="number"会自动过滤，但提交时拿到的仍是空字符串——得靠JS校验或换用type="text"+ 正则
