重置按钮必须置于<form>内且所有筛选控件需在同个<form>中，否则无效；原生reset仅恢复HTML初始值，自定义组件和外部筛选器需手动同步，并应按需启用按钮以避免误触。
重置按钮必须放在 <form> 内部才能生效
很多看板里把筛选控件全用 <div> 包着，再塞个 <button type="reset">，结果点下去毫无反应。根本原因是：浏览器只认 type="reset" 按钮所属的最近一层 <form>，并只重置该表单内的原生可重置控件（<input>、<select>、<textarea> 等）。
常见错误现象：<button type="reset"> 点击后无反应，或只清空了部分字段。
- 确保所有筛选控件（品牌下拉、价格输入框、状态复选框等）都在同一个
<form>标签内 - 不要嵌套多个
<form>，否则reset只作用于其父<form> - 如果用了自定义组件（如 Select2、Vue 的
<select>封装），它们不会被原生reset影响，需额外处理
初始 value 和 selected 才是重置目标
重置不是清空，而是回到页面加载时的初始状态。比如 <input value="北京"> 点重置后仍显示“北京”；<select><option selected>全部</option></select> 会回到“全部”。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
placeholder代替默认值——重置后 placeholder 不会自动填充，字段变为空白 - 用 JavaScript 动态设置
value或selectedIndex——重置仍按 HTML 初始值还原，不是 JS 设置后的值 -
<select multiple>中多个selected属性未显式写在 HTML 中，导致重置后没选项被选中
DataTables 或自定义筛选器需手动同步重置
像 DataTables 的全局搜索框、列级下拉筛选、或前端封装的日期范围选择器，都不在原生表单控制范围内。点击 type="reset" 按钮后，这些控件状态不变，造成“筛选已重置但表格没更新”的错觉。
正确做法是监听 form.reset 事件或绑定按钮点击，主动调用对应 API：
- DataTables：在按钮点击后执行
table.search('').columns().search('').draw() - Select2（v4+）：
$('#brand').val(null).trigger('change') - 日期选择器（如 flatpickr）：
flatpickrInstance.clear()或设回默认日期 - 务必用
setTimeout(..., 0)或form.addEventListener('reset', ...)确保 DOM 已完成原生重置，再执行 JS 同步
禁用误触：只在有修改时才启用重置按钮
看板里放个永远可用的重置按钮，用户一划就点中，刚选的条件全丢，体验极差。更合理的方式是让它“按需出现”或“按需启用”。
实操建议：
- 初始化时给重置按钮加
disabled属性 - 监听所有筛选控件的
input或change事件，对比当前值与初始值（可用form.elements[i].defaultValue获取） - 任一字段变更，移除
disabled；全部恢复初始值，再加回disabled - 避免用“是否为空”判断——有些字段默认值就是空字符串或
null，应比对defaultValue而非字面量
最常被忽略的一点：重置逻辑是否覆盖了所有筛选入口。比如 URL 参数带入的初始筛选、后端渲染的默认选中、JS 初始化时注入的值——这些都不会被 form.reset() 触及，必须在重置按钮逻辑里一并清理。否则用户以为重置了，实际只是 UI 假象。
