必须包裹在<form>中，否则回车不提交、Tab键跳过、屏幕阅读器无法识别——这是WCAG A级合规硬性要求，<form>提供原生焦点流与语义上下文，action和method可为空但标签不可省。
直接用 <input type="search">，但必须包在 <form> 里，否则回车不触发、屏幕阅读器读不出、Tab 键跳过——这不是“不好看”，是 WCAG A 级合规直接失败。
为什么 type="search" 必须套 <form>
脱离 <form> 的 <input type="search"> 会立刻丢掉三样东西：按回车不提交、键盘 Tab 跳不过去、屏幕阅读器根本不知道这是个搜索框。哪怕你只用 JS 拦截提交，<form> 也得存在——它提供原生焦点流和语义上下文，不是可有可无的容器。
-
action和method可以为空（比如<form>不写属性），但标签不能省 - 别用
<div>或<section>替代，JS 绑了submit事件也没用，无障碍链路断了 - 移动端 Safari 会因缺失
<form>拒绝唤起“搜索”软键盘，只显示“前往”
oninput vs onsubmit：该监听哪个事件
用户敲字就查，还是按回车/点按钮才查，决定了事件绑定位置和健壮性。用错事件，粘贴、语音输入、长按字母都会漏触发。
- 实时搜索（如建议下拉）：绑
oninput，但必须加防抖（300ms 常用），别用onkeyup——它捕获不到粘贴和语音输入 - 提交式搜索（最常见）：绑
form的submit事件，天然兼容回车 + 按钮双路径，且event.preventDefault()安全可控 - 别在
input上监听blur自动提交——移动端失焦太频繁，用户还没输完就发请求
iOS Safari 上 type="search" 样式崩了怎么办
Safari 默认给 type="search" 加了 appearance: searchfield，导致 width 失效、圆角不听使唤、清除按钮错位。重置外观是第一步，但顺序和配套措施缺一不可。
立即学习“前端免费学习笔记（深入）”；
- 先加
-webkit-appearance: none，再手动补border-radius、padding和border - 清除按钮伪元素要分开处理：
input::-webkit-search-cancel-button { appearance: none; }+input::-ms-clear { display: none; } - 禁用拖拽缩放：
resize: none，否则用户手滑一拉就变形 - 测试清空功能是否仍可用——Safari 15.4+ 对
appearance: none更严格，有些版本点了叉没反应
搜索框旁边加筛选下拉或清空按钮，怎么对齐不打架
多个控件并排时，“悬空”“错位”“间距忽大忽小”几乎全是盒模型和默认 margin 混用导致的。用传统 float 或绝对定位，在响应式下必崩。
- 统一用
display: inline-flex包裹所有控件（搜索框 + 下拉 + 按钮），设align-items: center - 用
gap: 8px控制间距，比每个元素单独设margin-right更稳定，无塌陷风险 - 别靠
padding-left+ 背景图塞图标——背景图不缩放、暗色模式下消失、聚焦高亮失效 - 如果清空按钮是额外加的
<button>，记得用pointer-events: none在非 hover/focus 状态下透传点击，避免遮挡输入框
真正难的不是写出能用的搜索框，而是在 iOS 键盘弹起时它不被顶出视口、在折叠屏上不塌成一条线、在 VoiceOver 下被准确读作“站内搜索，编辑文本”——这些细节没被显式处理，就不是完成态。
