必须用<form>，因其是语义、交互和无障碍的底线；脱离后丢失回车提交、Tab导航和屏幕阅读器识别能力，直接违反WCAG 2.1 A级标准。
必须用 <form>，不是可选项，是语义、交互和无障碍的底线。
为什么不能用 <div> 包裹设置项
表单控件（<input>、<select>、<textarea>）脱离 <form> 后，会立刻丢失三类关键能力：键盘回车无法提交、Tab 键跳过输入框、屏幕阅读器读不出控件用途。这不是“看起来像就行”的问题，而是 WCAG 2.1 A 级合规直接失败。
实操建议：
-
<form>可以没有action和method—— 空标签仍保有完整语义和聚焦管理 - 禁用
onsubmit="return false"这种粗暴写法；JS 中应监听submit事件并调用event.preventDefault() - 每个控件必须有明确
<label>：要么用for属性绑定id，要么用包裹式写法<label><input>文字</label>
<fieldset> + <legend> 是分组唯一合法方式
用 <h3> 或 <div class="group"> 模拟分组标题，会导致键盘导航断链、屏幕阅读器无法建立父子关系。而 <fieldset> 是 HTML 原生的语义化分组机制，对打印样式、禁用整组、焦点流都起作用。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 嵌套多层
<fieldset>→ 旧版 Safari 可能不渲染<legend> - 忘记给
<fieldset>加disabled属性 → 无法一键灰掉“高级模式”下所有子项 -
<legend>放在<fieldset>外面 → 语义断裂，辅助技术完全失效
正确结构示例：
<fieldset> <legend>网络设置</legend> <label>代理地址</label> <input type="text" name="proxy_host"> <label>启用 HTTPS 代理</label> <input type="checkbox" name="use_https_proxy"> </fieldset>
input[type="number"] 输不了小数点？三个属性缺一不可
Chrome 和 Safari 默认拒绝小数点和负号，不是 bug，是规范行为：当 step 为默认值 1、且未声明 min 时，浏览器会拦截非整数输入。
实操建议：
- 要支持小数 → 必须显式写
step="0.1"或step="any"（后者 iOS 兼容略差） - 要支持负数 → 必须加
min="-100"（哪怕只是占位，不设就拦 - 键） - 别依赖 type 校验 → 用户仍可粘贴
"abc"，JS 需监听input事件实时过滤 - 移动端更可靠 → 加
inputmode="decimal"强制唤起带小数点的键盘
验证提示放错位置，会导致 iOS 键盘弹起后按钮被顶出屏幕
动态插入 <span class="error"> 是最常见布局抖动源。iOS Safari 在键盘弹起后会重算视口高度，若提示区域突然出现，表单高度跳变，保存按钮可能直接移出可视区。
关键细节：
- 提示统一放在
<input>下方，用固定margin-top: 4px预留空隙 - 隐藏时用
visibility: hidden，不是display: none—— 否则空隙消失，布局塌陷 - 用
aria-live="polite"包裹提示区域，让屏幕阅读器能感知状态变化 - 所有原生控件外层都套一层
<div>并设min-width: 0，防止 flex/grid 容器默认的min-width: auto锁死宽度
复杂点不在怎么写，而在所有这些约束必须同时满足 —— 少一个，就可能在某个机型或辅助工具上彻底失效。
