用组织多题型混合问卷需确保每题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。
怎么用 <form></form> 组织多题型混合问卷
HTML 本身不提供“问卷组件”，所有题型都靠基础表单元素拼装。关键不是选对标签，而是让每个题型的 name 唯一、type 合理、提交逻辑可预测。
常见错误是把单选题和多选题都塞进同一个 name，结果后端只收到最后一个勾选项；或者把下拉框 <select></select> 的空值写成 value="" 却没设 required，导致用户跳过时提交空字符串而非拒绝提交。
-
<input type="radio">必须同名（name="q3"），不同value，且至少一个带checked（否则初始无值） -
<input type="checkbox">每个应有独立name或统一name+ 数组式命名（如name="hobbies[]"，部分后端能自动解析） -
<textarea></textarea>记得加rows和cols，否则默认太小；用placeholder提示格式，别依赖 label 位置 - 所有必填项必须加
required，但不要只靠它——浏览器校验可绕过，后端仍要验证
下拉题、评分题、日期题怎么写才不翻车
这些看似高级的题型，实际只是 <select></select>、<input type="range">、<input type="date"> 的组合，但兼容性和语义容易出问题。
比如 type="date" 在 Safari 旧版本里直接退化成文本框，用户可能输错格式；type="range" 没设 min/max 时默认 0–100，但“1–5 分”题必须显式写 min="1" max="5"，否则滑块位置和数值对不上。
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
<select></select>的第一个<option></option>建议设value=""且加disabled selected，避免用户误选“请选择”还提交 -
<input type="range">必须配<output></output>或 JS 实时同步显示数值，否则用户不知道拖到哪了 - 日期/时间类输入控件不保证格式统一，后端接收时要用
new Date()或库解析，别直接当字符串存 - 评分题若用星星图标，别只用 CSS 伪元素模拟交互——真实
input必须存在且可聚焦，否则键盘用户无法操作
怎么让「其他」填空和对应单选/多选联动
这是最常被硬编码搞崩的场景：用户选了“其他”，才显示一个文本框；但很多人用 display: none 隐藏后，忘了在提交前检查是否该字段该参与校验，或者 JS 切换时没同步 required 属性。
更隐蔽的问题是，如果“其他”文本框和前面的选项共用同一个 name（比如都叫 q7），后端收到的可能是字符串也可能是数组，解析逻辑会乱。
- 「其他」文本框必须有独立
name（如q7_other），和主选项区分开 - JS 控制显隐时，同步 toggle
required属性，而不是只改样式 - 提交前用
form.checkValidity()触发原生校验，比手动 if 判断更可靠 - 如果允许用户先填「其他」再选选项，记得监听
change和input双事件，防止漏触发
移动端问卷页面的三个硬伤点
PC 上好好的问卷，到手机上经常点不准、缩放错乱、键盘弹出遮挡提交按钮——这些问题和 HTML 结构强相关，不是光靠 CSS 能救的。
比如 <label></label> 没包住 input，iOS 上点击文字无法聚焦；又比如多个 radio 组没用 <fieldset></fieldset> 包裹，VoiceOver 读出来就是一堆孤立选项，毫无上下文。
-
<label></label>必须用for属性绑定id，或直接包裹input，否则触屏点击热区太小 - 避免给
form或input设固定width，用max-width: 100%+box-sizing: border-box - 提交按钮放在表单底部，且上方留足够空白（至少 100px），防止 iOS 键盘收起时页面错位导致按钮不可见
题型越多，越要检查每道题的 tabindex 顺序和焦点管理。键盘用户不会拖鼠标，他们靠 Tab 键一行行填——如果「其他」文本框在 JS 显示后没自动 focus()，就卡住了。
