step 必须与 min 联合判断合法性，因合法值需满足 (v − min) % step ≡ 0（浮点安全），min 是等差数列起点而非零；如 min="1.5" step="0.2"，序列为 1.5, 1.7, 1.9…；错误设 min="1" step="0.2" 会导致浏览器静默修正或 spinner 异常。
step 为什么必须和 min 一起算才能判断合法值
浏览器校验 step 合法性的底层逻辑是：一个值 v 必须满足 (v − min) % step === 0（在浮点安全前提下），而不是“v 是 step 的整数倍”。这意味着 min 是等差数列的起点，不是 0。比如 min="1.5" step="0.2"，合法序列是 1.5, 1.7, 1.9, 2.1…；而 min="1" step="0.2" 理论上应从 1 开始跳，但 1 不是 0.2 的整数倍，部分浏览器会静默修正初始 value 或让 spinner 行为异常。
常见错误现象：
-
value="1"+min="0" step="0.3"→ Chrome 可能自动把 value 改成0.9或1.2，Safari 可能直接忽略并允许提交 -
min="1" step="2"→ 合法值是1, 3, 5…，但后端按“2 的倍数”解析时会漏掉 1，造成语义错位
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 显式对齐起点：若希望步长为 2，就设
min="0"或min="2"，避免min="1" - 用 JS 验证时别硬写
v % step === 0，改用Math.abs((v - min) % step) （防浮点误差） - DevTools 里检查元素的
validity.stepMismatch属性，比肉眼观察更可靠
min/max/step 组合后，浏览器怎么生成合法值列表
浏览器不会预生成完整列表，但会在以下场景按规则推导：
立即学习“前端免费学习笔记（深入）”；
- 点击上下箭头或拖动
range滑块时，每次增减都取最接近的合法值（向上/向下取整到最近的min + n × step） - 表单提交前调用 Constraint Validation API，遍历所有可能的
n，检查v是否落在[min, max]内且满足模条件 - 初始
value若不合法，Chrome 会高亮输入框、Safari 可能静默接受、Firefox 表现居中
性能影响很小，但要注意：max 很大 + step 很小时（如 max="1000000" step="0.001"），校验过程不会卡顿，但用户拖滑块时可能明显延迟——因为浏览器要反复计算最近合法值。
实操建议：
- 避免极端组合：不要用
step="0.0001"配max="1e6"，改用整数单位（如乘以 10000 后用step="1"） - 测试时用
checkValidity()手动触发校验，比等提交更早发现问题 - 不要依赖浏览器自动生成的“可选值提示”，它根本不存在——
step不提供下拉选项或 tooltip 列表
type="number" 中 step="0.1" 为何总触发 stepMismatch
这不是浏览器 bug，而是 IEEE 754 浮点表示导致的必然结果。0.1 在二进制中是无限循环小数，实际存储为近似值（约 0.10000000000000000555）。当用户输入 "0.3"，浏览器内部用浮点累加验证：min + 3 × 0.1 ≠ 0.3，于是判定不匹配。
典型错误现象：
- 用户输入
0.3，提交时报value must be a multiple of 0.1 -
value="0.3"+min="0" step="0.1"→ Chrome 显示黄色警告边框，但 value 仍显示为 0.3
实操建议：
- 金额类场景一律用整数：单位“分”，
step="1" min="100" value="100"，显示层再除以 100 - 若必须用小数，优先选
step="0.125"（1/8）、step="0.25"（1/4）这类能被 2 的幂整除的值 - 服务端收到数字后，别直接用
parseFloat(req.body.x)做业务计算，先 round 到目标精度（如Math.round(x * 10) / 10）
哪些 type 支持 step，哪些写了也白写
step 只对 type="number"、type="range"、type="date"、type="time"、type="datetime-local"、type="month"、type="week" 生效；其余类型如 type="text"、type="color"、type="email" 上写 step 完全被忽略——DevTools 能看到属性，但 spinner 不出现、校验不触发、增减键无反应。
容易踩的坑：
-
<input type="text" step="0.01">→ 想限制小数位？没用。必须改成type="number" -
<input type="number" step="any">→ 允许任意精度，但表单提交时不再校验步长，validity.stepMismatch永远为 false -
type="date"中step="7"表示“以周为单位”，合法日期是min、min + 7 天、min + 14 天……不是“每 7 年”
真正容易被忽略的是：哪怕你写了 step，如果没配 min，浏览器依然会用隐式 min（通常是负无穷或 0）参与计算，导致行为不可控。所以只要用了 step，就该明确写上 min 和 max。
