HTML中input标签type=reset的重置按钮用法-html教程-PHP中文网

type="reset"仅重置有name属性且初始值由HTML属性（value/checked/selected）设定的字段；忽略JS动态设置的值、无name字段、textarea标签内文本及JS修改的defaultValue。

html中input标签type=reset的重置按钮用法

type="reset" 会重置哪些字段

type="reset 按钮只重置表单内 有 name 属性 且 初始值由 HTML 属性（如 value、checked、selected）设定 的控件。它不读取 JavaScript 动态设置的 value 或 checked 状态，也不重置通过 JS 修改过的 defaultValue。

常见被重置的字段包括：、、。

以下情况不会被重置：

没有 name 的 input（哪怕写了 value）
value 是 JS 赋值的（例如 el.value = "新值" 后再点 reset）
内容是写在标签体里的（初始文本），但未设 value 属性 —— 此时 reset 无效

reset 按钮和 form.reset() 方法行为一致吗

基本一致，但有细微差别：form.reset() 是 JS 接口，触发的是原生重置逻辑；而本质是调用所在

的 reset() 方法，并额外触发一次 click 和 reset 事件。

关键点：

两者都忽略 JS 对 defaultValue 的修改 —— 即使你执行了 input.defaultValue = "新默认值"，reset 仍按 HTML 初始属性还原
如果表单里有多个 type="reset" 按钮，每个点击都调用同一份重置逻辑，无优先级
form.reset() 可以在 JS 中条件触发（比如确认弹窗后才执行），type="reset" 则无法拦截或取消（除非 event.preventDefault() 在 click 阶段，但会同时阻止重置）

为什么点了 reset 按钮但某些字段没变

最常见原因是字段缺失 name 属性，或者初始值不是靠 HTML 属性声明的。比如：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

<input type="text" id="email"><!-- 无 name，reset 无视 --><input type="text" name="email"><!-- 无 value，初始为空字符串，reset 后仍是空 --><input type="text" name="email"><script>el.value = "test@ex.com";</script><!-- JS 赋值，reset 不回退 -->

另一个易忽略点：如果有 name 和 value，也会被重置 —— 这可能影响后续提交逻辑，需留意。

调试建议：

检查目标元素是否有 name，且该 name 在整个表单中唯一（重复 name 可能导致行为不可预测）
用浏览器开发者工具查看元素的 value 和 defaultValue 是否一致；不一致说明 JS 改过，reset 就不会还原它
对，只有带 selected 的才算“初始选中”，JS 添加的 selected 属性不会被 reset 认作初始状态

替代 reset 的更可控方案

真要精确控制重置行为，别依赖 type="reset"。直接用 JS 显式赋值更可靠：

document.querySelector('button[data-action="reset"]').addEventListener('click', () => {
  const form = document.getElementById('myForm');
  form.querySelector('[name="username"]').value = 'admin';
  form.querySelector('[name="level"]').value = 'basic';
  form.querySelector('[name="notify"]').checked = true;
});

这样做的好处：