应使用data-lang属性存储多语言字段值，并通过外层form的lang属性统一控制当前语言，配合CSS [lang]选择器隐藏非当前语言文本，select需为每个option单独设置data-lang属性并遍历更新textContent。
用 data-lang 属性标记多语言字段值
每个表单字段（如 <input>、<textarea>、<select>）需要同时携带多种语言的提示文案或默认值，不能靠 JS 动态拼接字符串。最稳妥的方式是把各语言内容存在自定义属性里，比如：data-lang-zh="姓名"、data-lang-en="Name"。这样切换时只需读取对应属性并赋值给 placeholder、value 或 textContent，不依赖外部 JSON 或 DOM 重渲染。
注意：别用 title 或 alt 存多语言内容——它们有语义用途，且部分浏览器会暴露为 tooltip，造成干扰。
示例结构：
<input type="text" data-lang-zh="请输入姓名" data-lang-en="Please enter your name" placeholder="请输入姓名">
用 lang 属性控制当前激活语言
整个表单外层加一个带 lang 属性的容器（如 <form lang="zh">），作为语言状态的单一信源。切换语言时只改这个属性值，所有字段通过 CSS 属性选择器或 JS 查询统一响应，避免维护多个状态变量。
立即学习“前端免费学习笔记（深入）”；
JS 切换逻辑极简：
document.querySelector('form').setAttribute('lang', 'en');
后续所有字段读取语言时，都基于这个根节点的 lang 值，例如：
const currentLang = form.getAttribute('lang') || 'zh';
input.placeholder = input.getAttribute(`data-lang-${currentLang}`) || input.getAttribute('data-lang-zh');
常见错误：在每个字段上单独存「当前语言」状态——一旦漏更新某个字段，UI 就错位，且无法批量同步。
用 CSS [lang] 选择器隐藏非当前语言的辅助文本
如果表单里有独立的多语言 <label> 或说明文字（非 placeholder），直接用 CSS 控制显隐更轻量，不用 JS 操作 DOM。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
写法示例：
form[lang="zh"] .lang-en { display: none; }
form[lang="en"] .lang-zh { display: none; }
对应 HTML：
<label> <span class="lang-zh">邮箱地址</span> <span class="lang-en">Email address</span> </label> <input type="email">
关键点：不要用 visibility: hidden 或 opacity: 0 ——屏幕阅读器仍可能读出，影响无障碍；display: none 才真正移除渲染流。
处理 <select> 的多语言选项需遍历 <option>
<select> 的选项文本不能靠 data-lang-xx 放在 <select> 标签上，必须落到每个 <option> 元素。否则切换语言时无法精准替换对应项。
结构要这样写：
<select> <option value="1" data-lang-zh="选项一" data-lang-en="Option One">选项一</option> <option value="2" data-lang-zh="选项二" data-lang-en="Option Two">选项二</option> </select>
JS 更新时需遍历所有 option 并逐个设置 textContent：
select.querySelectorAll('option').forEach(opt => {
const text = opt.getAttribute(`data-lang-${lang}`) || opt.getAttribute('data-lang-zh');
if (text) opt.textContent = text;
});
容易踩的坑：只改 select 的 textContent，会导致所有 option 文本变成一样；或者用 innerHTML 替换，可能意外清空 value 属性。
实际项目中，如果选项数量大或语言多，建议预编译好各语言的 option 片段再切换，避免频繁 DOM 操作卡顿。
