有序列表ol不能作为表单控件容器，因其非form合法子元素且不参与数据提交；必须将form设为外层容器，ol嵌套其中，所有input等控件置于li内并确保有name属性。
有序列表本身不能直接“提交”，但可以安全嵌入表单中作为结构化内容或辅助控件容器；关键不是“包裹”，而是确保所有可交互元素（如 input、select）在语义和 DOM 层级上都处于同一个 form 作用域内，且不破坏 HTML 嵌套规则。
为什么不能把 ol 当作表单控件容器来用
有序列表 ol 是纯语义化结构标签，不是表单域（form）的合法子元素容器——它不参与数据收集，也不影响提交行为。常见误解是想用 ol 包裹多个 input 实现“带编号的表单项”，但问题不在编号，而在：浏览器不允许 input 直接作为 ol 的子元素（除非它被包在 li 里），而 li 又不能作为 form 的直接父级来承载提交逻辑。
-
ol内只能嵌套li，li内可放任意内容，包括input、label、select等 - 但若这些表单控件要提交，它们必须位于某个
form标签内部，且该form不能被拆开塞进li或ol中间 - 错误写法：
<ol></ol> <form><li><input name="a"></li></form>→ 浏览器会把form提升到ol外，input脱离表单上下文
ol + form 的合法嵌套方式
唯一合规做法是让 form 成为最外层容器，ol 作为其子元素，所有可提交控件放在 li 里，并确保每个 input 都有 name 属性：
-
form必须包裹整个ol，不能只包某几个li -
li里允许放label+input组合，这是无障碍和可访问性的推荐写法 - 如果需要多行独立提交（比如每步一个提交按钮），不能靠多个
form套li，而应使用 HTML5 的form属性绑定，例如：<input form="step-1" name="xxx">，再配一个同id的<form id="step-1"></form>
容易被忽略的兼容性与可访问性细节
即使结构合法，以下三点常导致实际提交失败或读屏异常：
-
input缺少name→ 提交时字段完全消失，后端收不到任何值 -
label没有for属性或未正确关联id→ 屏幕阅读器无法识别控件用途，移动端点击区域也变小 -
ol的start或reversed属性不影响提交，但若用 JS 动态生成序号并依赖它做校验逻辑（如“第3项必填”），需注意 DOM 渲染顺序和 JS 执行时机，避免取到空值或错位
真正复杂的地方在于：你不是在“给有序列表加表单功能”，而是在用有序列表组织表单流程——编号只是视觉提示，数据流、语义归属、可访问性支持，全靠 form、name、id、for 这四者对齐。漏掉任一环，用户可能看着正常，但提交就丢数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
