单步表单只需一个语义正确的form标签，无需JavaScript控制步骤切换；必须用form包裹所有输入项以保障回车提交、Tab顺序、屏幕阅读器识别等原生行为；推荐包裹式label写法并避免内联onsubmit拦截。
单步表单不需要 JavaScript 控制步骤切换，也不用隐藏/显示字段——只要语义正确、布局清晰、可访问性达标，一个 form 就够了。
为什么必须用 form 包裹所有输入项
不是“看起来像表单”就行，浏览器原生行为（回车提交、Tab 焦点顺序、屏幕阅读器识别、fieldset[disabled] 批量禁用）全依赖这个标签。纯 div 布局会让键盘用户卡在第一个 input 出不去，WCAG 审查直接报错。
-
form可以没有action和method，空标签也有效 - 每个
input必须有对应label，推荐包裹式写法：<label>用户名<input name="username"></label> - 避免
onsubmit="return false"这类内联拦截，JS 中用event.preventDefault()更可控
用 flex 快速实现垂直堆叠布局
不用 float、不用 grid、不设固定宽度，三行 CSS 解决对齐问题：
form {
display: flex;
flex-direction: column;
gap: 8px;
}
label {
display: flex;
flex-direction: column;
gap: 4px;
}
input, select, textarea {
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
- 每组
label+ 控件自成一个 flex 列，天然垂直堆叠 -
gap控制间距，比margin更稳定（不会塌陷） - 移动端默认单列，无需媒体查询；要双列时只加
@media (min-width: 768px) { form { flex-direction: row; flex-wrap: wrap; } }
input[type="number"] 输不了小数点？检查这三个属性
Chrome 和 Safari 默认拒绝小数点和负号，不是 bug，是规范行为——step 和 min 缺一不可。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 支持小数：必须写
step="0.1"或step="any"（后者 iOS 兼容稍差） - 支持负数：必须显式设
min="-100"（哪怕只是占位） - 别指望 type 校验：用户仍可粘贴
"abc"，JS 需监听input事件过滤 - 移动端更可靠：加
inputmode="decimal"强制唤起带小数点的键盘
验证提示怎么放才不跳动
动态插入 span.error 最容易导致表单高度突然变化，尤其 iOS 键盘弹起后视口重算，按钮可能被顶出屏幕。
- 提示统一放在
input下方，用margin-top: 4px预留固定空隙 - 隐藏时用
visibility: hidden，不是display: none——否则空隙消失，布局抖动 - 用
aria-live="polite"包裹提示区域，让屏幕阅读器能感知变化
最常被忽略的是 min-width: 0 ——当 form 或 label 在 flex/grid 容器里时，浏览器默认的 min-width: auto 会锁死宽度，导致小屏下文字换行、输入框溢出容器。所有原生控件外层都该套一层 div 并设 min-width: 0。
