表单必须语义化、可访问且响应式：label与input须用for/id显式关联；name需语义化；required属性增删须用removeAttribute()；布局用Flexbox+媒体查询；标签顶部对齐；必填项统一说明；验证与焦点管理不可忽视。

表单结构必须语义化且可访问

不写 for 和 id 配对，等于把屏幕阅读器和键盘用户直接拒之门外。浏览器只认显式关联，不认视觉位置或 CSS 模拟。

• <label for="email">邮箱</label><input type="email" id="email"> 是唯一可靠写法；嵌套写法 <label>邮箱<input></label> 虽合法，但遇到 radio 组或多控件时会失效
• name 属性不能省，且要语义化——name="user_email" 比 name="input-2" 更利于后端解析和自动化测试
• 漏掉 required 的 DOM 属性增删逻辑：设 el.required = false 不会移除属性，必须用 el.removeAttribute('required')，否则表单提交仍被拦截且无提示

布局要用 Flexbox + 媒体查询，别靠 float 或固定宽度

Flexbox 是目前最可控的响应式表单布局手段，float 已淘汰，width: 300px 在手机上必然溢出。

• 移动端默认垂直堆叠：.form-group { display: flex; flex-direction: column; }
• 桌面端并排两列：@media (min-width: 768px) { .form-row { display: flex; gap: 1rem; } .form-row > .form-group { flex: 1; } }
• 避免用 display: inline-block 拼字段——换行间隙、基线对齐、垂直居中全靠猜，容易错位

标签对齐方式影响触控体验

左侧对齐标签在桌面尚可，在手机上会挤压输入框空间，导致点击区域过小；顶部对齐才是跨设备安全选择。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 所有 <label> 放在对应 <input> 上方，不用 position: absolute 挤占空间
• 移动端输入框最小高度建议 ≥ 44px（苹果人机指南），字体大小 ≥ 16px，确保拇指可点准
• 不要用 transform: scale() 缩小表单来“适配”小屏——缩放后点击热区没变，实际更难点

必填项标记要一致且低干扰

星号 * 本身没语义，也不被屏幕阅读器识别，单独使用等于没标。

立即学习“前端免费学习笔记（深入）”；

• 推荐做法：不标必填，只在选填字段旁加 （可选） 文字，语义清晰且兼容性好
• 若必须标必填，需在表单开头统一说明：“带 * 号为必填项”，否则视障用户无法获知规则
• 避免混合使用：有的字段用 *，有的用 required 属性但不视觉提示，会导致认知断层

真正卡住人的地方不在写法，而在验证时机和焦点管理——比如用户取消“其他”选项后，只隐藏了字段却没 removeAttribute('required')，表单就静默卡死；又比如回车键在单文本框表单里自动提交，不加 event.preventDefault() 就会刷新页面丢数据。这些细节不处理，响应式只是表面功夫。