表单动态显隐需同步切换 required/disabled 属性，用 dataset 标记依赖关系并监听 change 事件；多步骤表单应逐字段存取 sessionstorage、精准错误定位与滚动；文件上传须手动接管状态与校验；跨设备需保障键盘导航与可访问性合规。
表单字段动态显隐依赖用户选择
当表单中存在条件分支（比如“是否为企业用户”勾选后才显示营业执照上传项），硬编码所有字段会导致 DOM 冗余、验证混乱、可维护性差。关键不是“能不能显示”，而是“什么时候该显示，以及显示时是否同步校验逻辑”。
-
display: none或hidden属性仅控制可见性，required属性仍会生效，提交时可能报错——必须同步 togglerequired和disabled - 监听
change事件比click更可靠，尤其对select、radio、checkbox；避免用onclick内联写法，防止逻辑散落 - 推荐用
dataset标记依赖关系，例如：<input type="checkbox" data-shows="biz-fields">，再统一用 JS 查找并操作对应id或class - 注意 Safari 对
hidden属性的兼容性较弱，生产环境建议优先用aria-hidden="true"+ CSS 控制可见性，并配合tabindex="-1"移除焦点流
多步骤表单的状态保持与错误定位
长表单拆成步骤页后，用户最反感的是填完三页才发现第一页邮箱格式错了，还得重来。核心矛盾不是“分几步”，而是“错误发生时能否精准回溯+保留已填内容”。
- 不要依赖
sessionStorage存整个表单对象——字段类型混杂（日期、文件、布尔）容易序列化失败；应按字段名逐个存取：sessionStorage.setItem('user_email', emailInput.value) - 每步提交前调用
checkValidity()，但需注意：它只触发浏览器原生校验提示，不阻止后续 JS 执行；真正拦截要用event.preventDefault() - 错误字段聚焦后，滚动可能被
label的for关联打断，建议在focus()后加scrollIntoView({ behavior: 'smooth', block: 'center' }) - 步骤切换按钮禁用状态要反映真实校验结果，而非简单设
disabled——否则键盘用户仍可Tab进入并触发Enter
文件上传类字段的交互反馈缺失
用户点了“选择文件”，界面毫无响应，几秒后才弹出“上传成功”，中间完全黑盒。这类字段的交互断层直接导致重复点击、放弃操作或误判失败。
-
<input type="file">本身不提供进度、状态、错误码，必须用FileReader或fetch+FormData手动接管 - 文件名过长时，
input.value返回伪路径（如C:\fakepath\xxx.jpg），应取input.files[0]?.name显示真实名 - 限制类型和大小不能只靠
accept和max-size属性——它们可被绕过；JS 中必须二次校验：if (file.size > 5 * 1024 * 1024) - 上传中按钮文案要变（如“上传中…”），且必须禁用；但禁用后屏幕阅读器会跳过，应同时加
aria-busy="true"和aria-disabled="true"
跨设备表单焦点与键盘导航断裂
移动端点选下拉框后，键盘弹出但焦点没落到输入框；PC 端用 Tab 键跳过必填项；这些不是“体验问题”，是可访问性合规风险（WCAG 2.1 Level AA）。
-
<select multiple></select>在 iOS 上无法用键盘多选，必须提供替代方案（如标签式选择器 + 隐藏input[type="hidden"]） - 自定义下拉/日期组件若用
div实现，必须手动管理tabindex、role="combobox"、aria-expanded、aria-controls等属性 - 表单提交后，若跳转新页，焦点默认回到
body顶部；若留在当前页（如 AJAX 提交），应主动focus()到首个错误字段或成功提示容器 - 不要用
outline: none全局移除焦点环——至少为:focus-visible保留样式，否则键盘用户彻底失焦
真实业务里，最难的不是让表单“能用”，而是让它在用户反复修改、中断、切换设备、遭遇网络抖动时，依然能准确记住状态、给出明确反馈、不丢失上下文。这些细节不写进需求文档，但一上线就被投诉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
