button type="reset" 仅对 form 内带 name 的原生表单控件生效，无法重置普通 table 中的元素、无 name 属性的控件、contenteditable 元素、框架渲染内容或 file 输入框，复杂场景须用 javascript 手动清空。
不能直接用 button type="reset" 重置“HTML表格”里的数据——button type="reset" 只对 <form></form> 内的**表单控件**生效，而普通 <table> 标签本身不是表单，也不参与提交或重置逻辑。
<h3>button type="reset" 必须包裹在 form 标签内才有效</h3>
<p>常见错误是把重置按钮放在 <code><table> 里，却没把它和 <code><form></form> 关联起来：
-
<table><tr><td><button type="reset">重置</button></td></tr></table>→ 完全无效，按钮点击无反应 - 正确结构必须是：
<form><table>...<button type="reset">重置</button> </table></form> - 如果表格只是展示用途（比如用
<table> 排版表单字段），只要所有 <code><input>、<select></select>等都在<form></form>内，button type="reset"就能正常工作表格里的表单控件必须有 name 属性才能被重置
即使套了
<form></form>，button type="reset"也只会重置带name的可提交控件。表格中常漏掉这个：-
<input id="age">→ 不会被重置（缺name） -
<input name="age">→ 会被重置 -
<textarea name="remark">默认留言</textarea>→ 重置后恢复“默认留言”，不是空 -
<select name="category"><option value="1">A</option> <option value="2" selected>B</option></select>→ 重置后选中 B（因初始selected）
reset 不处理非表单元素，比如 td/tr/th 或自定义渲染内容
表格中若混入非原生控件（如用
<div contenteditable="true"> 模拟输入、React 渲染的单元格、JS 动态插入的 <code><span></span>显示值），button type="reset"完全无视它们：-
<td><input name="price"></td>→ 被重置 -
<td><div class="price-display">¥199</div></td>→ 不变，需 JS 手动清空 - 使用 Vue/React 渲染的表格行：DOM 被重置，但组件 state 不同步，界面看起来“没反应”
-
<input type="file" name="avatar">→ 浏览器安全限制，重置后仍显示已选文件名，必须手动设fileInput.value = ''
想真正清空表格表单，得靠 JavaScript 遍历 + 显式赋值
当表格结构复杂、含动态字段或需要部分保留时，
button type="reset"失效概率极高。可靠做法是用button type="button"+ 手动逻辑：- 绑定点击事件：
<button type="button" onclick="clearTableForm()">清空</button> - 遍历所有
input、select、textarea，按类型分别清空：el.value = ''、el.checked = false、el.selectedIndex = -1 - 跳过带
data-preserve="true"的字段（如 token、id） - 手动清空
<input type="file">：el.value = '' - 更新框架状态（如 React 中调用
setState({})，Formik 中调用resetForm()）
原生 reset 的“一键”只是假象——它只认 HTML 初始快照，而现代表格表单几乎都绕不开 JS 状态管理。真正可控的重置，永远始于你亲手写的那一行
el.value = ''。 -
