纯HTML无法实现分步表单，必须用JavaScript控制fieldset显隐、动态开关required、管理sessionStorage状态、同步progress.value/aria-current/焦点，并禁用非当前步fieldset。

纯 HTML 编辑器（如 CodeMirror、Monaco、Ace）本身不提供分步表单能力——它只渲染和编辑 HTML 源码；你要的是「在 HTML 页面里实现分步表单」，不是「用 HTML 编辑器做分步表单」。关键在 DOM 结构 + JS 控制逻辑，编辑器只是可选的输入工具。

为什么

+

是分步结构的底线

浏览器原生识别 fieldset 为语义化控件组，legend 是它的可访问标题。屏幕阅读器会明确播报“步骤 2：支付信息”，而 div + h3 只读作“标题，二级”，无法建立上下文关联。

• 漏掉 legend 或内容为空 → Lighthouse 直接报错“fieldset missing legend”
• 视觉上不想显示文字？用 position: absolute; clip: rect(1px, 1px, 1px, 1px) 隐藏，绝不能用 display: none
• 所有按钮（包括“下一步”）必须放在同一 fieldset 内部，否则键盘 Tab 会跳过整步
• 禁用非当前步的 fieldset（disabled 属性）可防用户手动聚焦隐藏字段，但需配合 JS 动态开关

怎么让progress真正反映步骤，而不是卡死在第一步

progress 标签本身不跟踪状态，只画一根线。value 必须是数字（比如 2），写成字符串 "2" 在 Safari 和部分旧 Edge 里会失效；max 应设为总步数（如 max="4"），不是索引长度（3）。

• 不要在 HTML 里写死 <progress value="1" max="4">，初始化后立刻用 JS 设置：document.querySelector('progress').value = currentStep
• 切换步骤时，必须同步更新：progress.value、当前 fieldset 的 aria-current="step"、以及焦点（focus() 到第一个有效 input）
• 如果某步首个字段是 type="hidden" 或 disabled，得手动找下一个可聚焦元素，否则键盘用户卡住
• Safari 对 progress 样式支持弱，若需带文字标签或自定义连线，退回到 ol + aria-current="step"

中间步骤的按钮为什么不能用type="submit"

浏览器对 type="submit" 的默认行为是触发表单提交并刷新页面——你写的 JS 步骤状态、输入值、滚动位置全丢。即使加了 event.preventDefault()，也容易因事件绑定时机或冒泡顺序漏掉。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 中间步骤一律用 button[type="button"]，确保无副作用
• 仅最后一步的“提交”按钮用 type="submit"，且其 click 事件中不调 preventDefault()
• 别把按钮放在 fieldset 外面，否则 Tab 键会跳过整步，破坏键盘导航流
• 校验当前步时，别用 form.checkValidity() —— 它扫整个 form，包括隐藏字段。应只查当前 fieldset 下的 querySelectorAll('input[required]:not([disabled])')

数据怎么存才不会在刷新/后退时丢

DOM 隐藏不等于数据保留。用 display: none 后，某些浏览器（尤其移动端 Safari）可能清空 input type="file" 值或重置控件状态；单纯靠 JS 变量存，在页面刷新时必然丢失。

• 用 sessionStorage 存两样东西：formStep（当前步序号）和 formData（JSON 字符串化的字段对象）
• 每次切步前保存：sessionStorage.setItem('formStep', String(nextIndex)) 和 sessionStorage.setItem('formData', JSON.stringify(data))
• 页面加载时，先读取 sessionStorage.getItem('formStep')，存在则跳转到对应步并还原数据
• 敏感字段（如身份证、银行卡号）别存 localStorage；sessionStorage 关闭标签页即清空，更安全
• 别监听 popstate 做路由跳转——多步表单通常不配真实 URL 路由，强行加会让 history 栈混乱

最常被忽略的点：焦点管理不是锦上添花，而是可访问性硬门槛。切步后没调 focus()，键盘用户就卡在上一步末尾；首个字段不可聚焦却没 fallback 查找，等于直接放弃这部分用户。这不是“优化项”，是功能缺陷。