重置按钮默认清空整个表单而非单个输入框；若只需清空username和email，应使用js手动赋值为空字符串，并通过id精准获取元素，避免preventdefault伪清空或语义混淆。
重置按钮默认行为会清空整个表单，不是只清空某个输入框
HTML 的 <input type="reset"> 本质是调用表单的 reset() 方法，它会把**所有**表单控件恢复到初始值（即页面加载时的 value 或 placeholder 状态），无法指定只清空某几个字段。如果你只希望清空 username 和 email 这两个输入框，用原生 reset 按钮做不到。
用 JS 手动清空特定 input 元素更可控
直接操作 DOM，给按钮绑定 click 事件，然后对目标元素赋空字符串即可。关键点在于准确获取元素和避免副作用：
- 用
document.getElementById()或document.querySelector()获取目标<input>元素，推荐用 id —— 更稳定、不依赖结构变化 - 清空时设
element.value = ""，不要用element.value = null，后者在某些浏览器中可能触发奇怪的验证行为 - 如果输入框有
required属性，清空后不会自动移除校验状态；可选加element.reportValidity()触发重校验，但通常不需要
<button type="button" onclick="clearFields()">清空用户名和邮箱</button>
<p><script>
function clearFields() {
document.getElementById('username').value = '';
document.getElementById('email').value = '';
}
</script></p>
避免用 reset 按钮 + preventDefault 做“伪定向清空”
有人试图给 <input type="reset"> 绑定 onclick 并调用 event.preventDefault()，再手动清空部分字段——这看似可行，但隐患明显：
- reset 按钮语义就是“重置整个表单”，用户预期与实际行为不符，可访问性差
- 若表单里有
<select></select>、<textarea></textarea>或带checked的复选框，它们的初始状态容易被忽略，导致清空逻辑遗漏 - 当表单通过 JS 动态设置过初始值（比如从 localStorage 恢复），
reset()仍按 HTML 初始值还原，和你的 JS 状态不一致
需要保留“重置”语义时，优先重构表单结构
如果 UI 上必须叫“重置”，又只要影响部分字段，最稳妥的做法是把目标字段单独包成一个子表单：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
这样 <input type="reset"> 就天然只作用于 username 和 email，无需 JS 干预，也不破坏语义。注意：多个表单不能嵌套，且每个 name 在各自 form 内唯一即可。
真正麻烦的不是写几行 JS，而是没想清楚“重置”到底该重置什么——是用户上次填的内容？还是页面加载时的默认值？这个边界模糊了，JS 清空逻辑就容易漏掉 hidden 字段、动态生成的控件，或者跟框架（如 React）的状态不同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
