多条件组合筛选栏应使用语义化表单结构：用包裹，组织维度，原生控件配正确name（如brand、price_min），禁用默认提交但保留form能力，用formdata自动采集数据。
多条件组合筛选栏不是靠一堆 <div> 堆出来的，核心在于语义化表单结构 + 可控的筛选状态管理。直接用 <code><form></form> 包裹所有筛选项，每个条件对应一个可提交、可重置、可被 JS 读取的原生控件，否则后续加搜索、分页、URL 同步都会踩坑。
用 <fieldset></fieldset> + <legend></legend> 组织筛选维度
把价格、品牌、分类这些逻辑上独立的筛选组，用 <fieldset></fieldset> 隔开，<legend></legend> 写标题。这样既满足无障碍访问（屏幕阅读器能识别分组），也方便 CSS 用 fieldset:not(:first-of-type) 控制间距，还让 JS 获取某组值时可以直接 form.querySelector('fieldset:nth-child(2)') 定位。
常见错误：全用 <div class="filter-group">，结果 JS 里要靠 class 名硬匹配，一改类名就断；或者把所有 <code><input> 扁平放在一层，失去层级语义。
- 品牌筛选用
<input type="checkbox" name="brand" value="apple">，不要用自定义 span 模拟复选框 - 价格区间必须用两个
<input type="number">或<input type="range">，并设name="price_min"和name="price_max"，别合并成一个 hidden 字段 - 分类用
<select multiple></select>或一组name="category"的 checkbox，避免用纯 JS 渲染的“伪下拉”
name 属性必须唯一且可映射后端参数
每个可筛选字段的 name 要和后端 API 的 query 参数名严格一致，比如后端接收 ?brand=apple&category=phone&price_min=1000，那前端所有 <input> 的 name 就得是 brand、category、price_min。别为了“好看”写成 filter-brand 或 ui_brand，否则 JS 序列化或后端解析时要额外做映射，徒增出错点。
特别注意：多个 checkbox 共享同一个 name（如 name="color"）时，浏览器默认只提交选中的那些，这正是我们想要的行为；但如果你用 name="color[]"，PHP 风格的写法在纯 HTML/JS 场景下无意义，反而干扰 FormData 解析。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
禁用默认表单提交，但保留原生能力
筛选栏通常不跳转页面，所以要用 event.preventDefault() 拦住 <form></form> 的 submit 事件。但千万别移除 <form></form> 标签或改成 <div> —— 否则就丢掉了 <code>form.elements、form.checkValidity()、new FormData(form) 这些开箱即用的能力。
示例：获取当前所有筛选值最简方式就是
const formData = new FormData(form); const params = Object.fromEntries(formData.entries());
它自动处理多选、空值忽略、同名多值（只取最后一个）等问题。如果自己遍历所有 input 手动收集，很容易漏掉 disabled 控件、radio 未选情况、或 checkbox 全未勾时如何表示“不限”。
- 重置按钮必须用
<button type="reset"></button>，不是type="button"+ JS 清空 —— 浏览器会自动还原初始值，包括checked、selected状态 - 所有
<input>必须有value（哪怕为空字符串），否则FormData里可能缺失该键 - 如果某条件支持“全部”选项，用
<option value="">全部</option>，而不是value="all"，保持空值语义统一
真正难的不是画出筛选栏，而是让每个 name、每个 value、每个表单控件的状态都和 URL query、API 请求、服务端渲染逻辑对得上。一旦其中一环脱节，比如用户分享带参数的链接进来，筛选项却没高亮，问题就出在 HTML 结构没承载真实状态。
