必须用<input type="search">而非type="text"，因其原生支持搜索语义、移动端“搜索”键盘、清空按钮、历史下拉、无障碍识别（读作“搜索框”）及search事件；配合<form method="get">和name属性（如name="q"）才能实现URL参数传递、分享收藏与正确提交。
直接用 <input type="search">，别手写清空逻辑或模拟搜索键盘——浏览器原生支持、语义正确、自带历史提示和无障碍识别，硬改反而丢功能。
为什么必须用 type="search" 而不是 type="text"
两者渲染看起来一样，但行为差很远：
-
type="search"在 iOS/Safari 上自动弹出带“搜索”回车键的软键盘，type="text"只有“回车” - 输入内容后，WebKit 浏览器（Chrome/Safari）自动显示 × 清空按钮，点击触发
input和search事件；type="text"不触发search事件 - 配合
name属性（如name="q"），浏览器可保存搜索历史，下拉提示复用 - 屏幕阅读器把
type="search"读作“搜索框”，type="text"只读作“文本框”，语义降级
<form> 必须存在，且 method="get" 不能省
很多人删掉 <form> 图省事，结果回车不提交、URL 不带参数、刷新就丢搜索词：
- 没
<form>，按回车不会触发任何提交行为，只能靠 JS 监听keypress，漏掉焦点外点击等路径 - 没
method="get"，表单默认用POST，搜索词进不了 URL，无法分享、收藏、后退复原 -
name属性必须设（如name="q"），否则GET提交后 URL 是/search?，而不是/search?q=xxx - 正确写法：
<form action="/search" method="get"> <input type="search" name="q" required> <button type="submit">搜索</button> </form>
搜索按钮和输入框对齐总错位？用 flex 别折腾 vertical-align
默认行内元素基线对齐，按钮“悬空”是常态。别调 line-height 或 vertical-align 硬凑：
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex; align-items: center;，一行代码解决垂直居中 -
<input>和<button>都设margin: 0，清除浏览器默认边距干扰 - 按钮文字太小？别只调
font-size，同步加padding或设height，确保和输入框高度一致 - 响应式场景下，给
<input>加flex: 1占满剩余空间，避免固定宽在小屏溢出
防抖和 event.preventDefault() 是必选项，不是可选优化
用户每敲一个字就发请求，要么后端扛不住，要么 UI 卡顿。无刷新搜索里这两步漏一不可：
- 监听
form.onsubmit，不是input.oninput或button.onclick——统一入口，回车和点击走同一逻辑 - 第一句必须是
e.preventDefault()，否则页面刷新，搜索状态全丢 - 输入防抖用 300ms 延迟：太短（500ms）显得卡顿
- 清空后或首次聚焦时要不要立即查？可以，但得判断
value.trim()是否非空，避免空请求
最常被忽略的其实是 name 和 method="get" 的组合——没它们，type="search" 就只是个带 × 图标的普通输入框，不是真正能用的搜索入口。
