纯HTML文件无法持久化配置，必须通过后端API实现：表单提交→HTTP请求→后端接收并存储→返回JSON→前端提示；需用data-*属性绑定配置元信息，避免type="number"在iOS输入小数点问题，用fieldset+legend语义化分组。
纯 HTML 文件无法真正保存或读取后台参数配置，所有“配置页面”本质只是前端表单界面，必须对接后端 API 才能持久化数据。
为什么 form action="config.html" 保存不了配置
常见错误是把 form 的 action 指向一个 HTML 文件，比如 action="config.html"。浏览器会尝试用 GET 方法加载该页面，而不是提交数据——结果就是刷新一次，刚填的值全丢。HTML 是静态文档，没有服务端逻辑，不会解析、存储或响应表单数据。
真实链路必须是：form 提交 → 浏览器发 HTTP 请求 → 后端（如 Node.js/Python/Java）接收 → 写入数据库或配置文件 → 返回 JSON 响应 → 前端 JS 解析并提示。
- 检查 Network 面板，确认请求是否发到了真实 API 地址（如
/api/config/save），而非某个 .html 路径 - 若后端未就绪，可用
fetch('/api/config/save', {method: 'POST', body: JSON.stringify(data)})模拟，但需服务端 CORS 和路由支持 - 禁止在
form上写onsubmit="return false"粗暴拦截；改用e.preventDefault()+fetch控制流程
如何用 data-* 属性绑定配置键名与类型
前端需要知道每个输入框对应哪个配置项、初始值是多少、是否必填。把这些元信息写进 DOM，比硬编码在 JS 里更易维护、可读性更强。
例如：
<input type="number" name="timeout_ms" data-key="timeout_ms" data-default="5000" data-required="true" data-type="integer" min="100" max="30000">
-
data-key是后端识别字段的唯一标识，必须和 API 接口约定一致 -
data-default用于页面加载时回填初始值（从 localStorage 或首次 GET /api/config 获取） -
data-type="integer"或data-type="boolean"可驱动 JS 自动做类型转换，避免字符串传给后端 - 对
<select></select>，每个<option></option>应带data-value，而非只靠value属性（后者可能被用户修改）
为什么 type="number" 在 iOS 上输不了小数点
iOS Safari 默认唤起数字键盘，但不显示小数点和负号，导致 type="number" 实际不可用。这不是 bug，而是系统键盘策略限制。
- 加
inputmode="decimal"强制调出带小数点的软键盘（Chrome/Firefox/Safari 均支持） - 必须设
step="0.1"或step="any"，否则 Chrome 会拒绝输入小数 - 要支持负数，
min必须显式设为负值（如min="-100"），否则 - 键被拦截 - 别依赖
type="number"校验——用户仍可粘贴 "abc"，JS 需监听input事件过滤非法字符
fieldset+legend 是唯一合规的设置分组方式
用 <div class="group"> 或 <code><h3></h3> 做分组，对屏幕阅读器、键盘导航、打印样式都不友好。WCAG 要求分组语义必须由原生标签承载。
正确写法：
-
disabled属性可一键禁用整组控件，且保持语义完整（aria-disabled不具备此能力） - 多个
fieldset嵌套不要超过两层，旧版 Safari 有渲染异常风险 - 每个
legend必须是fieldset的第一个子元素，否则部分读屏器无法关联
最常被忽略的一点：配置页面不是“做完就能用”，它必须和后端 API 的字段命名、类型、校验规则严格对齐；前端写的 data-key 和后端接口文档里的 key 名差一个下划线，保存就会静默失败。
