标签可原生存储表单html而不渲染、不执行脚本；需用document.importnode(template.content, true)克隆使用，注意ie降级、id唯一性、事件重绑定及验证规则挂载。
怎么用 template 标签存表单结构而不渲染
直接把表单 HTML 塞进 <template></template> 里，浏览器会解析但不渲染、不执行其中的脚本或加载资源。这是最轻量、原生支持的模板方案。
-
<template></template>内部的<input>不会触发focus、不会提交、不会被form.elements收集 - 必须用 JavaScript 克隆内容：不能直接
appendChild(template.content)，得用document.importNode(template.content, true)或先克隆再操作 - 注意：IE 完全不支持
<template></template>，需用<script type="text/template"></script>降级（此时靠innerHTML解析，要手动处理引号和转义）
如何动态填充模板并绑定事件
填数据本身简单，但事件绑定容易漏——因为每次克隆都是全新节点，旧的监听器不会自动复制过去。
- 别在模板里写
onclick="handle()"，这种内联事件不会随克隆生效；统一用addEventListener绑定到克隆后的元素上 - 如果表单字段有校验逻辑，推荐把验证规则写成函数，再通过
data-*属性挂载到对应<input>上，比如data-required="true"、data-pattern="email" - 示例：克隆后遍历所有
input，读取dataset.required，再调用addValidationRule(input)
用 cloneNode(true) 还是 importNode？
两者都能复制节点，但语义和行为不同：cloneNode 是对已有 dom 节点的深拷贝，而 importNode 是从文档片段中导入，更适合 <template></template> 场景。
-
template.content是一个DocumentFragment，不是普通 DOM 节点，直接cloneNode会报错或返回空 - 正确写法：
const instance = document.importNode(template.content, true)，第二个参数true表示深克隆 - 如果用了
<script type="text/template"></script>降级方案，则只能用innerHTML+createElement解析，此时没有importNode可用
表单模板里的 name 和 id 怎么避免重复
多个实例共用同一套模板时，name 可以保留（提交时自然分组），但 id 必须唯一，否则 label[for] 和 getElementById 会出错。
立即学习“前端免费学习笔记（深入）”；
- 模板中不要写死
id，改用占位符如id="input-{uuid}"，克隆后用随机字符串替换 -
name可以带数组语法，比如name="user[email]"，方便后端解析嵌套结构 - 如果要用
label关联，建议用包裹式写法：<label>邮箱<input name="email"></label>，就不用依赖id
模板不是“写一次就能到处贴”，克隆、事件、ID、兼容性这四块，少处理一块，上线后就可能丢数据或点不动。