必须用 event.preventDefault() 阻止表单默认提交行为，否则校验逻辑不执行；多步骤表单需用 sessionStorage 存取字段值并还原状态；fieldset 需配合 aria-labelledby 和具体 legend 提升可访问性；移动端优先用 inputmode 控制键盘类型，type 仅作降级。
表单提交前校验失败时，如何避免整页刷新？
用 event.preventDefault() 拦住默认提交行为是必须的，否则哪怕写了 JS 校验，表单也会直接发请求、跳转或刷新。
常见错误现象：点提交按钮后页面闪一下，控制台没报错，但 console.log 里的校验逻辑根本没执行——大概率是忘了这句。
- 只在
form.addEventListener('submit', ...)回调里加event.preventDefault()，别放在按钮 click 里（按钮可能不触发 form submit） - 校验通过后再手动调用
form.submit()（注意：这是原生提交，不走 AJAX） - 如果用
fetch提交，确保校验通过后才发起请求，且不再调用form.submit()
多步骤表单中，怎样让浏览器“记住”用户填过的内容？
不能依赖表单自动保存（autocomplete 对跨步骤无效），得自己存到 sessionStorage 或 localStorage。
使用场景：用户填完第一页，点“下一步”后返回，输入框应恢复原值；刷新页面也不丢数据。
立即学习“前端免费学习笔记（深入）”；
- 每次离开当前步骤（比如点击“下一步”或“上一步”）时，遍历该步骤内所有
input/select/textarea，用name作 key 存入sessionStorage - 进入某步骤时，用相同
name尝试读取并还原值，注意处理checkbox和radio的checked状态 - 别用
localStorage存敏感字段（如身份证号），sessionStorage更安全，关闭标签页即清空
用 fieldset + legend 分组时，为什么屏幕阅读器仍读不出上下文？
单纯套标签不够，缺少语义关联。浏览器和读屏软件需要明确知道每个控件属于哪个分组。
性能影响不大，但可访问性会断层：用户听不到“第2步：联系方式”这样的上下文，只听到一堆孤立的“邮箱”“电话”。
- 每个
fieldset必须有legend，且文字要具体（别写“信息”这种空泛词） - 给每个
input加aria-labelledby，指向对应legend的id，例如：<input aria-labelledby="step2-legend">+<legend id="step2-legend">第2步：联系方式</legend> - 避免嵌套
fieldset，部分旧读屏软件支持不好
移动端表单里，inputmode 和 type 搞混会怎样？
type="number" 会强制触发数字键盘，但可能校验异常（比如输入 “1.5e2” 被判无效）；而 inputmode="decimal" 只影响键盘类型，不干预值解析。
容易踩的坑：为手机号加 type="number"，结果用户无法粘贴、长按选中困难，还可能被自动去掉开头的 0。
- 手机号用
inputmode="tel"+type="text"，兼顾键盘适配与字符串处理自由度 - 金额输入推荐
inputmode="decimal"（iOS/Android 都支持），再配合 JS 控制小数位，比type="number"更可控 -
inputmode不是所有浏览器都支持（IE 完全不支持），需搭配type降级，比如type="text" inputmode="numeric"
