必须用 <form>，因其提供原生语义、回车提交、无障碍支持及聚焦管理；分组用 <fieldset>+<legend>；type="number" 需设 step 和 min 支持小数负数；保存按钮应为 <form> 内 type="submit" 并防重复提交。
系统设置页面该用 <form> 还是纯 <div>？
必须用 <form>，哪怕不提交到后端。浏览器原生表单语义、键盘回车触发、无障碍支持（如屏幕阅读器识别 label 关联）、自动聚焦管理都依赖它。纯 <div> 布局会导致 Tab 键跳过输入项、Enter 无响应、WCAG 合规性直接失败。
实操建议：
-
<form>不一定要有action和method—— 空<form>仍保有语义和交互能力 - 每个控件必须有明确的
<label for="xxx">或包裹式<label><input></label></li> <li>禁用 <code>onsubmit="return false"
这类粗暴拦截；改用event.preventDefault()在 JS 中精细控制
怎么让设置项分组清晰又不破坏语义？
用 <fieldset> + <legend>，不是 <div class="group">。这是 HTML 原生的表单分组机制，对键盘导航、屏幕阅读器、打印样式都有直接影响。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
<h3>模拟分组标题 → 屏幕阅读器无法将其与下方控件建立父子关系 - 多个
<fieldset>嵌套过深 → 部分旧版 Safari 会丢失 legend 渲染 - 忘记给
<fieldset>加disabled属性来整体禁用一组设置（比如灰掉“高级模式”下的所有子项）
示例结构：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<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"] 为什么输不了小数点或负号？
因为默认 step 是 1，且未声明 min/max 时，部分浏览器（尤其是 Chrome）会拒绝非整数输入。这不是 bug，是规范行为。
实操建议：
- 要支持小数：显式写
step="0.1"或step="any"（后者兼容性稍差，但更灵活） - 要支持负数：必须加
min="-100"（哪怕只是占位），否则 Chrome 会拦截-键 - 别依赖
type="number"做校验 —— 用户仍可粘贴非法字符串，JS 需监听input事件做实时过滤 - 移动端注意：
type="number"在 iOS 上唤起数字键盘，但会隐藏小数点；加inputmode="decimal"更可靠
保存按钮该放哪？要不要防重复点击？
按钮必须放在 <form> 内部，且类型为 type="submit"。这是唯一能保证回车提交、焦点逻辑正确、表单状态同步的方式。外置按钮 + form="id" 属性虽可行，但部分旧浏览器不支持，且脱离 DOM 流导致可访问性下降。
防重复点击不是“锦上添花”，而是必选项：
- 用户连点两次，可能触发两次 API 请求，造成配置错乱（比如开关被切回原值）
- 不要只靠 UI 禁用按钮 —— 要同时在 JS 中设
form.submit()的节流标志，或用AbortController中断前一次请求 - 成功后重置按钮状态前，务必先调用
form.reset()或手动同步字段值，否则用户刷新页面会看到“已保存”但实际未持久化
容易被忽略的一点：系统设置页往往有“恢复默认”功能，它不该是另一个 <button>，而应是 <button type="reset"> —— 这样才能天然联动所有 <input> 的 defaultValue，无需额外维护默认值映射表。
