html表单无法直接导入外部数据，必须通过javascript读取json/csv等数据并映射到对应表单控件，注意dom就绪、异步时机、字段匹配及前后端协同。
HTML 表单本身不能直接导入外部数据
HTML 是静态标记语言，<form></form> 标签不提供从 CSV、JSON 或后端接口读取并填充字段的能力。所谓“导入”，实际是靠 JavaScript 配合外部数据源完成的，浏览器原生表单控件（如 <input>、<select></select>）只负责展示和收集用户输入。
用 JavaScript 读取 JSON 并填充表单字段
这是最常见且可控的做法，适用于配置项预填、用户数据回显等场景。关键点不是“导入”，而是“把数据映射到对应表单控件”。
- 确保 JSON 字段名与表单元素的
name或id属性一致，否则得手动建立映射关系 - 使用
document.querySelector或document.getElementById获取控件，再根据类型设置值：input[type="text"]用.value，<select></select>用.value或遍历options，复选框用.checked - 注意异步时机：如果 JSON 从
fetch加载，必须等请求完成后再操作 DOM，否则控件可能还没渲染出来 - 示例片段：
fetch('/data/user.json')
.then(r => r.json())
.then(data => {
Object.keys(data).forEach(key => {
const el = document.querySelector(`[name="${key}"]`);
if (!el) return;
if (el.type === 'checkbox' || el.type === 'radio') {
el.checked = data[key];
} else {
el.value = data[key];
}
});
});
用 FormData API 处理文件上传后的“导入”行为
用户点击“导入”按钮选择 CSV/Excel 文件时，表单本身不解析内容；真正干活的是 JS 读取文件并解析（比如用 Papa.parse 解析 CSV），再把结果塞进表单或提交前重组数据。
- 别指望
<input type="file">自动把 CSV 转成表单字段值 —— 它只提供File对象 - CSV 没有标准 schema，列顺序、空值、引号包裹等容易出错，建议服务端解析更稳妥；前端解析仅适合简单场景
- Excel（.xlsx）需引入
xlsx库，体积较大，移动端注意性能；不要在change回调里直接调readAsArrayBuffer后立刻解析，要等onload触发 - 常见错误现象：
Uncaught TypeError: Cannot set property 'value' of null—— 通常是因为 selector 写错，或 DOM 尚未就绪
避免混淆“表单提交目标”和“数据来源”
很多人以为给 <form action="/import"></form> 加个 URL 就算导入了，其实这只是指定了提交地址。外部数据是否被接受、如何解析、是否写入数据库，完全由后端决定，前端表单只是载体。
立即学习“前端免费学习笔记（深入）”；
-
method用POST是常规选择，但某些 API 要求PUT或带特定 header（如Content-Type: application/json） - 如果后端期望 JSON，别用传统表单提交，改用
fetch构造请求体；否则会收到400 Bad Request或字段为空 - 跨域时，后端必须支持 CORS，否则
fetch会静默失败，控制台报No 'Access-Control-Allow-Origin' - 表单中混用原生提交和 JS 提交容易引发重复提交，尤其在按钮没禁用的情况下
