原生HTML可组合多条件筛选区域的关键是语义化表单控件、统一name命名规则（如category[]）、用FormData手动聚合多值并过滤空值，监听submit拦截处理查询参数。
怎么用原生 HTML 写出可组合的多条件筛选区域
直接上结论：不用框架也能做，关键不是堆 <input>，而是让每个筛选项能独立控制、状态可读、提交时能拼出干净的查询参数。核心是表单控件语义化 + 用 name 统一约定规则 + 避免手动拼 URL。
筛选项类型和对应 input 的取值逻辑
不同字段要匹配合适的控件，否则 JS 读值或后端解析会出错。常见组合如下：
-
<input type="text">：用于模糊搜索（如用户名、标题），空字符串视为“不参与筛选” -
<select multiple>：用于多选分类，注意必须带name，且值用逗号分隔不如用数组式命名（如name="category[]"） -
<input type="date">：日期范围建议拆成start_date和end_date两个字段，避免用<input type="date" multiple>（无效） -
<input type="checkbox">：开关类条件（如“仅显示已审核”），务必设value，并用checked控制默认状态，不要依赖 JS 切换
提交前如何把表单转成可用的查询对象
别用 form.serialize()（jQuery）或手写正则——原生 FormData 就够用，但要注意多选和空值处理：
const form = document.querySelector('#filter-form');
const data = Object.fromEntries(new FormData(form));
// 这样拿到的是字符串，checkbox 未勾选不会出现，select multiple 会返回第一个选中项
// 正确做法：
const formData = new FormData(form);
const query = {};
for (let [key, value] of formData.entries()) {
if (!query[key]) query[key] = [];
query[key].push(value);
}
// 然后 flatten 单值字段：query.category = query.category?.[0] || undefined;
重点：多选字段（name="tag[]"）会被 FormData 当作多个同名 entry，必须手动聚合；空文本框应过滤掉，否则后端收到 keyword="" 可能误触发全量查询。
立即学习“前端免费学习笔记（深入）”；
为什么不能直接用 <form method="get"> 提交
看似省事，但实际埋坑：
- URL 长度限制（尤其多选+长文本），容易截断
- 空值字段变成
?status=&type=，后端难区分“未填”和“填了空字符串” - 日期字段在不同浏览器中格式不一致（如
2024-05-01vs2024/05/01） - 无法拦截提交做防抖、校验或加 loading
更稳妥的做法是监听 submit 事件，阻止默认行为，自己构造请求 —— 即使最终还是 GET，也能统一清理数据、补默认值、加缓存 key。
复杂点在于多选和范围类字段的状态同步，比如用户取消某个 checkbox 后，对应参数得从 query 对象里彻底删掉，而不是留个空数组。这点容易被忽略，结果筛选条件“粘滞”不生效。
