必须设method="POST"且enctype="multipart/form-data"才能上传文件，否则后端收不到二进制数据；name属性需与后端字段名严格一致，仅靠input type="file"和form提交即可对接多数后端。
直接用 form + input + name 属性就能对接绝大多数后端，关键在字段命名规范和提交方式控制，不是堆组件。
表单必须设 method="POST" 且带 enctype 控制上传能力
后台接收逻辑通常按 HTTP 方法区分操作类型：GET 用于查询，POST 才处理设置保存。不写 method 默认是 GET，会导致参数拼在 URL 里、长度受限、敏感信息暴露。
如果表单含文件上传（比如 logo 上传、配置模板导入），必须显式加 enctype="multipart/form-data"；否则后端收不到二进制数据，$_FILES（PHP）或 request.files（Python Flask/FastAPI）全为空。
-
<form method="POST" action="/api/settings/save">—— 普通文本/开关类设置 -
<form method="POST" enctype="multipart/form-data" action="/api/settings/upload">—— 含文件字段时必加 - 避免用
GET提交设置，URL 编码后中文变乱码，Nginx 默认限制 URL 长度为 4k
name 属性要和后端约定字段名完全一致
后端不认 id 或 data-key，只从 name 解析键名。例如 Django 的 request.POST.get('site_title')、Node.js Express 的 req.body.site_title，都依赖前端 <input name="site_title">。
立即学习“前端免费学习笔记（深入）”；
嵌套结构（如数组、对象）需用方括号语法：name="smtp[host]"、name="admins[]"，多数后端框架能自动解析成对应数据结构。
- 布尔开关用
<input type="checkbox" name="enable_cache" value="1">，勾选才传值，后端判断是否存在该 key 即可 - 多选下拉用
<select name="roles[]" multiple>，注意[]后缀，不然后端只收到最后一个选项 - 禁用字段（
disabled）的值不会提交，改用readonly+ 隐藏域补原始值
用 fieldset + legend 分组比 div 更语义且兼容键盘导航
后台设置页字段多、逻辑模块化（如「基础信息」「邮件配置」「安全策略」），纯靠 CSS 分组对屏幕阅读器和 tab 键导航不友好。fieldset 天然支持聚焦到一组、快捷跳转，且部分后端生成文档工具（如 Swagger UI 表单预览）会识别它。
别把 legend 当装饰——它是该组唯一可被 aria-labelledby 引用的标签，影响自动化测试和无障碍校验。
<fieldset><legend>SMTP 设置</legend><input name="smtp[host]"></fieldset>- 禁用整组用
<fieldset disabled>，比逐个加disabled稳定，且视觉反馈统一 - 避免嵌套
fieldset，Safari 对多层嵌套的 focus 管理有 bug
提交按钮必须带 name 和 value，后端靠它区分操作意图
一个设置页常有「保存」「保存并重启服务」「恢复默认」多个动作，不能只靠按钮文字判断。后端需通过提交的键值对识别用户意图，例如 action=save、action=restart。
用 button[type="submit"] 替代 input[type="submit"]，前者支持 HTML 内容（图标、badge），后者只能纯文本，且某些旧版 Edge 对 input 的 name 解析异常。
<button type="submit" name="action" value="save">保存设置</button><button type="submit" name="action" value="reset">恢复默认</button>- 不要用
onclick="location.href=..."跳转代替表单提交，绕过后端验证且无法传字段值 - 按钮禁用状态用
disabled，但提交前记得移除，否则值不发送
真正难的不是写表单，是让每个 name 都对得上后端文档里的字段定义，以及确保 enctype 和 method 在所有分支路径下都不被覆盖。改一个字段名，前后端得同步更新，漏掉就静默失败。
