用组织多题型混合问卷需确保每题name唯一、type合理、提交逻辑可预测：单选用同name不同value的radio并设checked；多选用独立name或数组式name如hobbies[]；textarea加rows/cols和placeholder；必填项加required但后端仍须校验；select首项设value="" disabled selected；range须设min/max并配output或JS同步；date/time需后端解析；“其他”填空须独立name并JS同步required；label必须for绑定或包裹input；避免固定width，按钮上方留足空白；键盘用户依赖tabindex和自动focus。

怎么用

组织多题型混合问卷

HTML 本身不提供“问卷组件”，所有题型都靠基础表单元素拼装。关键不是选对标签，而是让每个题型的 name 唯一、type 合理、提交逻辑可预测。

常见错误是把单选题和多选题都塞进同一个 name，结果后端只收到最后一个勾选项；或者把下拉框 的空值写成 value="" 却没设 required，导致用户跳过时提交空字符串而非拒绝提交。

• 必须同名（name="q3"），不同 value，且至少一个带 checked（否则初始无值）
• 每个应有独立 name 或统一 name + 数组式命名（如 name="hobbies[]"，部分后端能自动解析）
• 记得加 rows 和 cols，否则默认太小；用 placeholder 提示格式，别依赖 label 位置
• 所有必填项必须加 required，但不要只靠它——浏览器校验可绕过，后端仍要验证

下拉题、评分题、日期题怎么写才不翻车

这些看似高级的题型，实际只是 、、 的组合，但兼容性和语义容易出问题。

比如 type="date" 在 Safari 旧版本里直接退化成文本框，用户可能输错格式；type="range" 没设 min/max 时默认 0–100，但“1–5 分”题必须显式写 min="1" max="5"，否则滑块位置和数值对不上。

• 的第一个 建议设 value="" 且加 disabled selected，避免用户误选“请选择”还提交
• 必须配
  或 JS 实时同步显示数值，否则用户不知道拖到哪了
• 日期/时间类输入控件不保证格式统一，后端接收时要用 new Date() 或库解析，别直接当字符串存
• 评分题若用星星图标，别只用 CSS 伪元素模拟交互——真实 input 必须存在且可聚焦，否则键盘用户无法操作

怎么让「其他」填空和对应单选/多选联动

这是最常被硬编码搞崩的场景：用户选了“其他”，才显示一个文本框；但很多人用 display: none 隐藏后，忘了在提交前检查是否该字段该参与校验，或者 JS 切换时没同步 required 属性。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

更隐蔽的问题是，如果“其他”文本框和前面的选项共用同一个 name（比如都叫 q7），后端收到的可能是字符串也可能是数组，解析逻辑会乱。

• 「其他」文本框必须有独立 name（如 q7_other），和主选项区分开
• JS 控制显隐时，同步 toggle required 属性，而不是只改样式
• 提交前用 form.checkValidity() 触发原生校验，比手动 if 判断更可靠
• 如果允许用户先填「其他」再选选项，记得监听 change 和 input 双事件，防止漏触发

移动端问卷页面的三个硬伤点

PC 上好好的问卷，到手机上经常点不准、缩放错乱、键盘弹出遮挡提交按钮——这些问题和 HTML 结构强相关，不是光靠 CSS 能救的。

比如 没包住 input，iOS 上点击文字无法聚焦；又比如多个 radio 组没用

包裹，VoiceOver 读出来就是一堆孤立选项，毫无上下文。

• 必须用 for 属性绑定 id，或直接包裹 input，否则触屏点击热区太小
• 避免给 form 或 input 设固定 width，用 max-width: 100% + box-sizing: border-box
• 提交按钮放在表单底部，且上方留足够空白（至少 100px），防止 iOS 键盘收起时页面错位导致按钮不可见

题型越多，越要检查每道题的 tabindex 顺序和焦点管理。键盘用户不会拖鼠标，他们靠 Tab 键一行行填——如果「其他」文本框在 JS 显示后没自动 focus()，就卡住了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！