多选题应使用同名 checkbox，而非 ol 或 select multiple；ol 仅为语义化编号容器，不参与表单提交；select multiple 在移动端兼容性差；css 计数器比 ol 更适合实现序号样式。
有序列表（ol）本身不支持多选，别用它做问卷控件
直接说结论：ol 是语义化编号容器，不是表单控件。它没有 name、不参与提交、无法绑定值、也不响应用户选择——哪怕你给里面每个 li 套上 input，也还是得靠里面的 input 才能传数据，ol 本身只是个“外壳”。常见错误是写成：
<ol> <li> <input type="checkbox" name="reason" value="price"> 价格太高</li> <li> <input type="checkbox" name="reason" value="quality"> 质量不好</li> </ol>
这看着像“带序号的多选”，但问题不在序号，而在于：如果漏掉 name 或 value，后端就收不到任何值；如果没加 required（且没配 JS 校验），空提交就过掉了。
select multiple 是原生多选，但移动端基本失效
真正能提交多选数据的 HTML 原生方案只有 select 加 multiple 属性。但它在 iOS Safari 上被完全忽略——用户点开仍是单选，Ctrl/Cmd 多选逻辑压根不触发。安卓部分机型也有视觉反馈缺失或滚动异常问题。
- 必须显式写
<select multiple name="tags"></select>，只写multiple=""或multiple="true"都行，但简写multiple最稳妥 -
select.value永远只返回第一个选中项，取全部要用Array.from(select.selectedOptions).map(opt => opt.value) - 表单提交时发的是多个同名参数：
tags=1&tags=3&tags=5，后端必须按数组接收（如 PHP 的$_POST['tags']是数组，Node.js 的req.body.tags默认可能是字符串，需中间件解析） - 不设
size属性时，多数浏览器默认只显示 2 行，选项一多就看不见，建议至少size="4"
多选题该用 input type="checkbox"，不是 ol 或 select
绝大多数问卷里的“多选题”实际应使用一组 input type="checkbox"，它们共享同一个 name（如 name="hobbies"），每个有独立 value。这是兼容性最好、语义最清晰、键盘和屏幕阅读器都支持的方式。
- 所有 checkbox 必须共用 name，否则后端收不到数组；name 写成
hobby1、hobby2就变成多个独立字段 - label 必须显式绑定：
<input id="hobby1" type="checkbox" name="hobbies" value="reading"><label for="hobby1">阅读</label>，不能只靠包裹或 class 控制 - 若需“全选/反选”，JS 应用
document.querySelectorAll('input[name="hobbies"]')遍历，而不是靠父容器 class 或ol索引 - “其他”填空联动时，checkbox 的
value="other"和旁边的input type="text" name="hobby_other"必须用 JS 同步required属性，否则校验会漏掉
序号只是视觉需求，用 CSS 计数器比 ol 更可控
如果你真需要每道多选题选项前带 “1. 2. 3.” 这类编号，别依赖 ol——它无法和表单逻辑解耦，还容易干扰无障碍焦点流。用 CSS counter 更干净：
<div class="checkbox-group"> <label><input type="checkbox" name="platform" value="web"> 网页端</label> <label><input type="checkbox" name="platform" value="ios"> iOS</label> <label><input type="checkbox" name="platform" value="android"> Android</label> </div>
然后加 CSS：
.checkbox-group { counter-reset: option; }
.checkbox-group label { display: block; }
.checkbox-group label::before {
counter-increment: option;
content: counter(option) ". ";
margin-right: 8px;
}
这样编号纯属样式，不影响表单行为，也不增加 DOM 复杂度。真正容易被忽略的是：当题目动态增删选项时，CSS 计数器自动重排，而 ol 里的 li 一旦被 JS 移动或隐藏，编号就可能错乱或语义断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
