给HTML表单控件添加清除按钮需手动实现：input/textarea设value=""（number/date等类型勿用null）；select需设selectedIndex=0或遍历options置selected=false；按钮须type="button"、aria-label、flex布局，并同步框架state。
如何给 HTML 表单控件添加「清除值」按钮
直接加一个按钮就能清空输入框？不行。浏览器原生不提供 clear 按钮，必须手动绑定事件和逻辑，且不同控件（input、textarea、select）清空方式不同，容易漏掉 selectedIndex 或 value 未重置的情况。
input 和 textarea 的清空逻辑要分开写
input 和 textarea 虽都用 value 属性存内容，但它们的 DOM 接口行为一致，可统一处理；但要注意类型为 number、date 的 input 清空后应设为空字符串而非 null，否则某些浏览器会保留上次有效值。
- 对
input[type="text"]、input[type="email"]、textarea：直接赋el.value = "" - 对
input[type="number"]：也用el.value = ""，不要用el.value = null，否则 Chrome 可能忽略 - 对
input[type="date"]或datetime-local：同样赋空字符串，部分旧版 Safari 需额外调用el.blur()触发校验重置
select 下拉框清空不能只设 value
select 元素的 value 是只读属性（反映当前选中项），真正控制选中状态的是 selectedIndex。设 select.value = "" 在多数情况下无效，尤其当首项不是空值时。
- 正确做法是
select.selectedIndex = 0（前提是第一项是占位符如<option value="">请选择</option>） - 更稳妥的方式是遍历
options，找到value === ""的项并设其selected = true，或直接select.value = ""后再select.dispatchEvent(new Event("change"))确保监听器响应 - 多选
select[multiple]需循环清除所有options[i].selected = false
按钮位置与交互细节常被忽略
把清除按钮放在输入框右侧是常见做法，但纯 CSS 定位（如 position: absolute）容易在缩放或高对比度模式下错位；用 flex 包裹输入框 + 按钮更健壮。另外，按钮本身需有明确可访问性支持。
立即学习“前端免费学习笔记（深入）”；
- 按钮必须带
type="button"，否则在表单内默认为submit，点一下就提交了 - 给按钮加
aria-label="清空输入框内容"，配合tabindex="0"保证键盘可操作 - 清空后建议自动聚焦到输入框（
input.focus()），方便用户继续输入，但要避免在屏幕阅读器中打断上下文 - 对受控组件（如 React 中的
value由 state 控制），仅操作 DOM 不生效，必须同步更新 state —— 这是前端框架里最常踩的坑
