必须用英文双引号包裹模板变量，如name="[% field %]"，否则浏览器按name token规则解析失败，导致javascript无法通过[name='xxx']选取元素。
模板中 name 属性必须用双引号包裹变量
动态生成 name 属性时，若写成 name=[% field %]，浏览器会按 HTML NAME TOKEN 规则解析：只允许字母、数字、-、_、.，且不能以数字开头。一旦 field 值为 "last-updated-time" 或 "123"，属性将被截断或完全忽略，导致 $("[name='last-updated-time']") 查不到元素。
正确写法是强制加英文双引号：name="[% field %]"。哪怕值看起来“安全”，也要统一包裹——这是唯一能覆盖所有变量取值场景的写法。
- 不要依赖“这个字段肯定没空格”来省略引号
- 单引号
name='[% field %]'也可用，但需确保模板引擎不转义内部单引号（TT 默认不转，Mason 可能需配置） - 若变量含双引号（极少见），应由后端提前转义，而非在模板里用
[% field | html %]—— 那会破坏 name 的语义完整性
value/checked/selected 必须由服务端直出，不可靠 JS 补充
value、checked、selected 是 HTML 初始渲染阶段生效的布尔或字符串属性，不是运行时状态。JS 在 DOMContentLoaded 后设置 input.value = xxx 或 select.value = yyy，只会覆盖初始值，且表单重置（form.reset()）时还原的是 HTML 直出值，不是 JS 设置的值。
常见翻车点：用 JS 模拟“默认选中”来替代 selected，结果用户点重置按钮，选项回到空白。
- 文本框、密码框、邮箱等：用
value="[% user.email %]"，空值也写value=""，别留属性为空 - 单选/复选框：只给对应
<input type="radio">或<input type="checkbox">加checked，不要写checked="true"—— 浏览器只认属性存在与否 - 下拉框：
<option value="admin" selected>管理员</option>，且确保selected只出现在一个<option></option>上
Vue/React 中 default value 本质是 state 初始化问题
框架接管表单后，HTML 层的 value 或 selected 属性失效。Vue 的 v-model、React 的 value prop 完全以组件 data/state 为准。此时“默认值”其实是 state 的初始值是否匹配 option 的 value 字符串或类型。
例如 Vue 里写 <select v-model="role"><option value="admin">管理员</option></select>，若 data() { return { role: '' } }，下拉框就空白——因为没匹配项。
- 初始化 state 时，值必须严格等于某个
<option value="..."></option>的value（包括类型，"1"≠1） - options 异步加载时，state 初始值建议设为
null或undefined，等数据到位再赋值，避免首次渲染错配 - React 受控组件中，不要在
useEffect里首次设setValue——用户会看到一闪而过的空白
布尔属性如 disabled/required 不要写等号赋值
disabled、required、readonly 是布尔属性，规范写法只有两种：disabled 或 disabled=""。写成 disabled="false" 或 disabled="0"，浏览器照样启用禁用状态——因为它只看属性是否存在，不解析值。
模板中常见错误是条件输出：[% IF is_readonly %] readonly="true" [% END %]，这会导致 readonly="true"，虽然也能禁用，但不符合规范，且部分旧浏览器可能行为不一致。
- 正确条件写法：
[% IF is_readonly %] readonly [% END %] - JS 动态控制时，用
el.disabled = true/false，而不是setAttribute('disabled', '')—— 后者无法取消禁用 - 所有布尔属性都适用此规则，包括
checked和selected（但它们通常由服务端直出，不常 JS 控制）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
