最合适，需配name、aria-label，包裹并用get提交；重视可访问性、移动端适配与防抖。
搜索框用 <input type="search"> 最合适
浏览器原生支持搜索语义，会自动添加清除按钮、历史记录下拉，还兼容屏幕阅读器。别用 type="text" 硬凑，语义和体验都差一截。
常见错误是加了 type="search" 却没配 name，导致表单提交时参数丢失；或者忘了加 aria-label，对无障碍用户不友好。
-
name必须设，比如name="q"，否则后端收不到搜索词 - 加
autocomplete="off"要谨慎——多数场景该开，关了反而破坏用户习惯 - 移动端 Safari 对
type="search"有默认圆角和内边距，用appearance: none重置前先确认是否真需要
表单提交必须包裹 <form></form>，不能只靠 JS 绑定
很多人直接给 <input> 加 onkeyup 或点击事件模拟搜索，结果回车失灵、右键“搜索”菜单不可用、书签链接带不了参数。
核心是：搜索本质是「向服务器请求新数据」，不是纯前端交互。哪怕你用 JS 获取值，也该让 <form></form> 承担提交逻辑，再用 event.preventDefault() 拦截做自定义处理。
立即学习“前端免费学习笔记（深入）”；
- 表单
method推荐"get"，方便分享链接、支持浏览器前进后退 -
action设为空（action=""）即可提交到当前页，不用硬写 URL - 如果用 AJAX，监听
form.submit事件比监听按钮点击更可靠——用户可能按回车、或用语音输入后自动提交
搜索框的可访问性容易被忽略的三处
不是加个 placeholder 就算完事。屏幕阅读器用户依赖标签明确知道“这是搜什么”，键盘用户需要清晰焦点路径，缩放用户需要足够点击热区。
- 必须用
<label for="xxx"></label>关联id，别只靠placeholder当提示——它不是 label，且聚焦后就消失 -
placeholder文字颜色太浅（比如#999）在高对比度模式下可能看不见，建议用color: CanvasText或至少#666 - 搜索按钮如果用图标（如放大镜 SVG），必须加
aria-hidden="true"，并在按钮内用<span class="sr-only">搜索</span>提供文本
移动端搜索框的宽度和触发时机要手动控制
浏览器不会自动帮你适配小屏：默认 width: 100% 可能撑破容器，软键盘弹出时页面缩放又会让输入框错位。
关键不是“让它看起来像 App”，而是确保用户能点中、能看清、能顺利提交。
- 用
min-width: 200px防止在窄屏上过窄，别依赖百分比撑满 - iOS 上
input[type="search"]获焦时可能触发页面缩放，加viewportmeta 的user-scalable=no是下策，优先用 CSStransform: scale(1)锁定 - 别在输入过程中频繁发请求——防抖阈值至少
300ms，否则用户还没打完字，接口就 429 了
