button type="reset" 仅在form内有效，重置为html初始值而非清空；需控件有name属性，且不处理file外的非表单元素；失效常见于js阻止默认行为、同名控件冲突或动态插入未初始化。
button type="reset" 只在 form 内部才有效
直接把 <button type="reset"></button> 放在页面任意位置，它不会清空任何内容——浏览器只认它为“表单重置按钮”，且仅当它位于 <form></form> 标签内部时，才会触发重置行为。常见错误是把它丢在 <div> 里或表单外，点一下毫无反应。
<p>实操建议：</p>
<ul><li>确保该 <code>button 是 <form></form> 的直接子元素或嵌套在其中的任意层级（比如在 <fieldset></fieldset> 或 <div> 里都行）
<li>表单内所有可重置的控件（<code><input>、<textarea></textarea>、<select></select>）必须有 name 属性，否则 type="reset" 不会触碰它们
value 属性预设了初始值（如 <input name="email" value="test@example.com">），重置后会回到这个值，而不是清空成空字符串哪些输入字段会被 reset 影响？
type="reset" 不是“清空所有输入框”，而是“恢复表单控件到其初始 HTML 状态”。这意味着：
-
<input type="text" name="username">→ 初始无值，重置后为空 -
<input type="text" name="phone" value="138****1234">→ 重置后显示138****1234，不是空 -
<textarea name="bio">默认介绍</textarea>→ 重置后恢复为“默认介绍” -
<input type="checkbox" name="agree" checked>→ 重置后仍勾选；若没写checked，则取消勾选 -
<input type="file" name="avatar">→ 重置后文件选择被清除（但部分浏览器可能显示“未选择文件”，属正常） -
<input type="hidden">、<button></button>、<output></output>等不参与重置
reset 按钮不生效？检查这几个关键点
点按钮没反应，大概率不是 bug，而是配置疏漏：
- 确认表单没有 JavaScript 阻止了默认行为：比如绑了
form.addEventListener('reset', e => e.preventDefault())，这会让type="reset"完全失效 - 检查是否有多个同名
name的控件（例如两个<input name="age">），此时重置逻辑可能不稳定，尤其涉及单选/多选时 - 动态插入的表单控件（用 JS append 的
<input>）若没在 DOM 加载完成前就存在，reset不会识别它们——必须在表单初始化时就存在于 HTML 中，或通过 JS 手动调用form.reset() - 使用了 Web Components 或框架（如 Vue/React）时，原生
reset通常无法同步更新响应式数据，需配合框架方法
想真正“清空”而非“重置”？别依赖 type="reset"
很多场景下用户要的是“一键变空”，而不是“回到上次填的值”。这时候 type="reset" 就不合适了：
- 初始
value不为空（比如搜索框带 placeholder 或默认关键词） - 表单由 JS 动态生成，初始状态不可靠
- 需要清空
<div contenteditable>、富文本编辑器、自定义下拉等非标准控件 <p>更可控的做法是绑定点击事件，手动清空：</p> <pre class="brush:php;toolbar:false;"><button onclick="clearForm(document.getElementById('myForm'))">清空</button> <script> function clearForm(form) { const inputs = form.querySelectorAll('input, textarea, select'); inputs.forEach(el => { if (el.type === 'checkbox' || el.type === 'radio') el.checked = false; else if (el.type === 'file') el.value = ''; else el.value = ''; }); } </script></pre> <p>注意：这种手动清空不会触发 <code>input或change事件，如果业务逻辑依赖这些事件（比如实时校验），得额外 dispatch。真正的难点不在怎么写，而在于“重置”和“清空”的语义混淆——前者是浏览器原生能力，后者是业务需求。多数时候，你得先想清楚：用户点这个按钮，到底想回到哪个状态？
