原生html问卷只需选对input类型并语义化：单选用radio、多选用checkbox、短文本用text、长文本用textarea；name统一归组，label绑定id，required慎用；选项≤5用radio，≥10用select；number/tel需配合pattern和inputmode；date/email需降级校验；必加autocomplete和无障碍支持。
怎么用原生 HTML 组合 input 类型实现基础问卷表
直接能用，不用框架也能交差的问卷，核心是选对 input 类型 + 合理语义化结构。别一上来就套 Vue 或 React，纯 HTML + CSS 就够覆盖 80% 的内部调研、活动报名场景。
关键不是“全”，而是“准”：单选用 input[type="radio"]，多选用 input[type="checkbox"]，短文本用 input[type="text"]，长文本必须换 textarea —— 混用 input[type="text"] 写 200 字会卡死用户。
-
name属性必须一致才能让同组 radio/checkbox 互斥或归组（比如所有性别选项都设name="gender"） - 每个
input必须有配套的label，且用for指向id，否则移动端点选区域太小 - 别漏掉
required，但只加在真正必填项上；否则用户没填某个多选题就提交不了，体验极差
为什么 select 和 input[type="radio"] 别乱换
下拉菜单 select 看似省空间，但选项超过 5 个后，用户得点开、滚动、再找——实际操作成本高于横向排列的 5–7 个 radio。反过来，如果选项有 20 个（比如全国省份），硬塞 radio 会把页面撑爆，这时 select 是唯一合理选择。
- 选项 ≤ 5 个：优先
input[type="radio"]，可配合fieldset+legend分组 - 选项 ≥ 10 个：强制用
select，加optgroup做分类（如<optgroup label="一线城市"></optgroup>） - 禁止把
select伪装成 radio（比如用 JS 把下拉变成按钮组）——无障碍支持崩坏，屏幕阅读器读不出来
input[type="number"] 和 input[type="tel"] 的真实表现
它们不是“增强版 text”，而是带设备软键盘触发逻辑的类型。在 iOS 上，type="number" 弹出数字键盘，但输入字母不报错，只是提交时校验失败；type="tel" 在安卓会弹出带 *# 的拨号键盘，但不会自动过滤非数字字符。
- 要限制只能输数字？靠
pattern="[0-9]*"+inputmode="numeric"双保险，别只信type="number" -
type="tel"适合手机号、分机号等含符号的字段（如021-1234-5678），但别指望它自动格式化，那是 JS 的活 - 所有带
type的 input 都要配aria-label或label，否则 VoiceOver 会读成“编辑文本”这种无效信息
提交前最容易被忽略的兼容性雷区
表单能显示不等于能提交。iOS Safari 对 input[type="date"] 的支持从 14.5 才开始稳定，低版本直接退化成 text；Android 很多定制系统把 type="email" 的校验规则改得五花八门，有的允许中文邮箱，有的直接拦住。
- 日期类字段，生产环境必须降级：用
input[type="text"]+placeholder="YYYY-MM-DD"+ 前端正则校验（^\d{4}-\d{2}-\d{2}$） - 邮箱字段别只靠
type="email"，后端必须重验，因为浏览器校验连test@都可能放过 - 所有
input都加上autocomplete属性（如autocomplete="email"），不然密码管理器无法正确填充
表单的复杂度不在控件数量，而在每个控件背后隐含的设备行为、校验边界和辅助技术链路。少一个 label，就可能让视障用户卡在第一个问题；少一个 inputmode，就让移动端用户反复切键盘。这些细节不写进代码，光靠“样式好看”撑不住真实使用。
