在响应式布局中，为适配移动端和桌面端而重复渲染同一表单会导致 id 属性重复，违反 html 规范，影响 lighthouse 评分、屏幕阅读器体验及表单可访问性；唯一合规解法是为不同实例分配唯一 id，同时保持 name 属性一致以确保后端正常接收数据。
在响应式布局中，为适配移动端和桌面端而重复渲染同一表单会导致 id 属性重复，违反 html 规范，影响 lighthouse 评分、屏幕阅读器体验及表单可访问性；唯一合规解法是为不同实例分配唯一 id，同时保持 name 属性一致以确保后端正常接收数据。
HTML 标准明确规定：id 属性在整个文档中必须唯一（参见 HTML Living Standard § 3.2.4）。即使两个表单通过 CSS（如 display: none 或媒体查询）仅在特定视口下可见，只要它们共存于同一 DOM 中，重复的 id 就会触发可访问性（a11y）警告、破坏
✅ 正确做法：保留 name 不变，差异化 id
name 属性决定表单提交时的键名（如 name=John → POST 数据中 $_POST['name']），而 id 仅用于 DOM 定位、CSS 选择、JavaScript 操作及
<!-- 移动端表单（小屏显示） -->
? 关键注意事项：
- ✅
- ✅ 使用 aria-hidden 配合 CSS 控制可见性（而非 display: none）时，需同步管理 aria-hidden 值，避免屏幕阅读器误读隐藏内容；
- ⚠️ JavaScript 中若依赖 document.getElementById('name')，需重构为更健壮的选择器（如 document.querySelector('form.form-mobile input[name="name"]')）；
- ? 若表单需动态同步值（如移动端输入实时反映到桌面端），应通过 name 绑定事件监听，而非 id。
? 进阶建议：使用 BEM 或语义化类名统一管理，例如 js-form-field--name-mobile，配合 data-name="name" 属性实现逻辑复用，彻底解耦样式、行为与结构。
总之，ID 唯一性不是“兼容性妥协项”，而是现代 Web 开发的底线要求。差异化 id 不仅修复 Lighthouse 错误，更是构建可访问、可维护、符合标准的响应式表单的必要实践。
