应使用语义化表单结构：用包裹筛选区，分组并配说明，等控件设合法name属性；范围筛选统一用min_price/max_price，JS校验逻辑；内必须嵌套，配合FormData提取数据、form.reset()重置，并确保无障碍支持。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

为什么不用 div 堆筛选项 直接用一堆 <div> 包 <code><input> 或 <select></select>，后续 JS 拿值要写一堆 querySelector 魔术选择器，重置时还得手动清空每个字段。更麻烦的是，屏幕阅读器无法识别“这是价格筛选区”“这是分类多选区”，无障碍直接掉档。语义化不是为了好看，是让结构自带含义，方便提取、重置、读取。

推荐做法：

• 整个筛选区域包在 <form></form> 里——这样 form.reset() 才能真正还原所有字段初始值
• 每个逻辑字段组（如“价格区间”“标签筛选”）用 <fieldset></fieldset> 包裹，并配 <legend></legend> 说明用途
• <fieldset name="price_range"></fieldset> 这种写法虽不标准（name 不是 fieldset 的合法属性），但可作为 JS 定位依据；真正起作用的是内部 input 的 name
• 多选标签用 <input type="checkbox" name="tag" value="react">，别用 class 模拟，否则 FormData 拿不到

怎么组织 price_range 这类范围型字段 范围筛选不是两个独立输入框，而是一个语义整体。用户改了“最低价”，系统不该立刻丢弃“最高价”的值，也不该让两个输入框各自提交为 min_price=100 和 max_price=500 却不校验逻辑（比如 min > max）。

实操建议：

• 把两个 input 放进同一个 <fieldset name="price_range"></fieldset>，并统一加 data-field="range" 标记便于 JS 统一处理
• 使用 name="min_price" 和 name="max_price" —— 后端接口通常也按这个 key 接收，避免 JS 再做映射
• 不要设 required 在单个输入框上，而是由 JS 在提交前校验：若任一有值，则两个都应有效且 min
• 如果允许“只设上限”或“只设下限”，后端需支持 min_price=null 或忽略该字段，前端别硬塞默认值（如 min_price=0）干扰业务语义

筛选弹窗里

怎么和语义化结构配合 <dialog></dialog> 只负责模态层和焦点管理，它不管里面填什么。但如果你在里面堆了一堆没 name、没 fieldset、没 form 的 input，那 <dialog></dialog> 就只剩个壳子。

关键点：

• 必须把整个筛选区写成 <form></form>，且 <dialog></dialog> 是它的父容器，不能反过来
• 调用 dialog.showModal() 后，确保焦点落在第一个可聚焦元素（如第一个 input）上，可用 form.querySelector('input, select, textarea').focus()
• 点击“确定”时，别直接发请求——先用 new FormData(form) 提取数据，再转成对象：

  Object.fromEntries(new FormData(form))

  。注意：checkbox 多选会自动合并为数组，但单个未勾选的 checkbox 不会出现在 FormData 中
• Safari 对 <dialog></dialog> 的 open 属性支持不稳定，永远用 JS 控制显隐，别写 <dialog open></dialog>

移动端适配时最容易漏的语义细节 在小屏上，筛选项常折叠进汉堡菜单或底部弹层，但结构语义不能打折。很多项目为了“省事”把筛选区用 display: none 切换，结果屏幕阅读器直接跳过，或者键盘 Tab 焦点穿透到背后列表。

避坑提醒：

• 别用 visibility: hidden 或 opacity: 0 隐藏筛选区——它们仍参与可访问性树；要用 hidden 属性或 display: none，且确保显示时同步移除 hidden
• 弹出后，给 <dialog></dialog> 加 aria-modal="true"，并用 inert 属性临时禁用背景内容（部分浏览器支持，不支持时需 JS 模拟）
• 触摸设备上，<input type="number"> 在 iOS 弹出数字键盘，但 Android 表现不一；如非必要，用 type="text" inputmode="numeric" 更可控
• 别在 <fieldset></fieldset> 上加 tabindex="-1"——它本身不可聚焦，加了反而干扰焦点流

表单结构是否语义正确，不体现在渲染效果上，而体现在你能否一行代码拿到干净参数、一次 reset() 彻底清空、一个键盘 Tab 走完整个流程。这些事，往往在第一次联调接口或第一次被视障用户反馈时才暴露。