onreset事件可在表单重置时执行自定义操作，如清空结果区、重置校验状态；需确保<button type="reset">在<form>内，否则无效；原生reset仅还原初始值，不触发input/change事件，非表单内容需手动清理。

用 `` 配合表单的 `onreset` 事件，就能在清空输入的同时执行自定义操作——比如清除结果区域、重置校验状态或记录日志。

确保按钮在 form 内且 type 正确

reset 按钮必须放在 `

` 标签内部，且 `type` 明确设为 `"reset"`。否则点击无效，或误触提交行为：

• ✅ 正确写法：<form id="myForm"><input name="name"><button type="reset">重置</button></form>
• ❌ 错误写法：按钮脱离 form、漏写 type、或写成 type="button"（不会触发 reset 流程）
• ⚠️ 注意：若按钮在 form 内却没设 type，默认是 submit，点一下先重置再提交，页面可能跳转

用 onreset 事件补充清理非表单内容

原生 reset 只影响 ``、``、`` 等可提交控件，对 `<div id="result">` 或提示文字完全无感。这时靠 `onreset`： <ul> <li>在 `<form>` 上添加 <code>onreset="clearResult()"</code>，或用 JS 绑定：<code>form.addEventListener('reset', clearResult)</code> </form> </li> <li> <code>clearResult()</code> 函数里可执行：<code>document.getElementById('result').textContent = ''</code> </li> <li>该事件在浏览器完成默认重置后触发，时机可靠，无需手动调用 <code>reset()</code> </li> </ul> <h3>注意 reset 行为的边界和限制</h3> <p>reset 不是“清空”，而是“还原初始值”。很多问题出在这里：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a> <p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li>字段没写 <code>value="..."</code>，初始值为空字符串，reset 看起来像清空；写了默认值，就会还原回去</li> <li>JS 动态设置的值（如 <code>input.value = 'xxx'</code>）不影响 reset 的目标值</li> <li>disabled 字段、无 name 属性的字段、Shadow DOM 内部元素，reset 一律不处理</li> <li>它不触发 <code>input</code> 或 <code>change</code> 事件，依赖这些事件的校验提示需手动移除</li> </ul> <h3>需要确认或定制逻辑？改用 button + 手动清空</h3> <p>如果要加 confirm 提示、只清部分字段、或同步框架状态，就不能依赖原生 reset：</p> <ul> <li>把按钮改为 <code><button type="button" onclick="customReset()"></code> </li> <li>函数内遍历 <code>form.elements</code>，按类型分别设 <code>.value = ''</code>、<code>.checked = false</code>、<code>.selectedIndex = 0</code> </li> <li>再手动清空结果区、移除错误 class、聚焦首字段，全程可控</li> </ul> </div>