构建响应式问卷表单需语义化html（form/fieldset/legend/label）+ flexbox布局 + 媒体查询，兼顾可访问性、移动端适配与视觉层次，禁用js框架。
要构建一个响应式且结构清晰的在线问卷调查表单，核心在于语义化HTML结构 + 灵活的CSS布局（如Flexbox或Grid）+ 适度的媒体查询，而非依赖JavaScript框架。以下是一个轻量、可直接运行的HTML示例，兼顾可访问性、移动端适配和视觉层次。
语义化结构奠定清晰逻辑
使用form包裹整个问卷，每个问题用fieldset分组，标题用legend，选项用label包裹输入控件。这样既利于屏幕阅读器理解，也方便CSS样式统一控制。
- 单选/多选：用input type="radio"或checkbox，每个选项独立label
- 文本输入：搭配textarea或input type="text"，并设置required属性标记必填项
- 下拉选择：用select + option，首项设disabled selected作占位提示
响应式布局靠CSS Flexbox驱动
将fieldset设为display: flex方向为列，配合gap控制间距；问题容器宽度设为100%，在小屏上自动撑满，在桌面端可加max-width: 600px居中显示。所有表单控件统一设置width: 100%，避免横向溢出。
- 按钮使用width: fit-content并居中，防止在窄屏上过宽
- 利用@media (max-width: 768px)微调字体大小、内边距和行高，提升触控体验
- 禁用user-scalable=no，保留用户缩放权利，符合WCAG标准
无障碍与可用性细节不可省略
每个input必须有对应label（用for/id关联），必填字段在legend或label后添加 *标识。错误提示不依赖颜色——比如提交失败时，用文字说明+图标+焦点自动跳转到首个错误项。
- 为textarea设置rows="4"，避免默认高度过小
- 禁用autocomplete="off"，除非业务强要求；优先用语义化值如autocomplete="email"
- 所有交互元素确保有足够对比度（文本与背景至少4.5:1），并支持键盘Tab导航
精简但有效的提交反馈机制
表单提交后，服务端返回成功状态即可重定向或显示内联成功消息；若需前端校验，仅用原生checkValidity()和reportValidity()，避免复杂JS逻辑。提交按钮添加disabled状态防止重复点击，并在加载中显示“提交中…”文字。
- 不要用alert弹窗提示成功，改用页面内绿色提示条，3秒后自动消失
- 错误信息放在对应字段下方，用aria-live="polite"确保屏幕阅读器可读
- 保持整个表单DOM结构扁平，避免嵌套过多div干扰语义流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
