使用 可快速添加语义化搜索框，支持自动清除按钮、搜索建议及更好可访问性；需设 name 属性、合理搭配 placeholder 与 form，并注意移动端适配和状态反馈。
怎么用
HTML5 原生支持搜索语义， 不仅语义清晰，还能在 Safari、Chrome 等浏览器自动添加清除按钮（×），且部分系统会触发搜索建议。它和 type="text" 渲染几乎一致，但更准确表达用途，对可访问性和 SEO 有隐性好处。
- 必须加
name属性（如name="q"），否则表单提交时该字段不会被发送 - 建议搭配
placeholder（如placeholder="搜点什么..."），但别依赖它当标签——屏幕阅读器可能忽略它 - 如果嵌入
，记得设method和action，否则点击回车可能刷新页面或跳转到当前 URL 根路径
纯 CSS 美化搜索框的几个关键点
默认搜索框边框、圆角、聚焦态都很朴素，但不用框架也能干净地改。重点不是“好看”，而是保持可用性：比如聚焦时要有明显视觉反馈，清除按钮不能被误遮挡。
- 用
border-radius统一圆角（推荐8px或var(--radius)），避免左右两端不一致 - 聚焦时用
outline: none配合box-shadow替代（例如box-shadow: 0 0 0 2px #007bff），否则键盘用户无法感知焦点位置 - Safari 的 × 按钮可通过
input[type="search"]::-webkit-search-cancel-button定制，但不要设display: none——它对触控用户很重要；可微调大小或颜色 - 字体大小建议 ≥16px，小屏下尤其注意，否则输入文字挤在一起
搜索框放哪？表单要不要提交？
个人页面里搜索功能往往只是前端过滤（比如筛选项目列表），并不真发请求。这时候容易踩两个坑：一是表单没处理默认行为，回车导致刷新；二是把搜索逻辑写死在 HTML 里，后续难维护。
- 如果纯前端搜索（如 JS 过滤 DOM），给
加onsubmit="return false;"或用 JS 阻止默认行为：event.preventDefault() - 搜索框本身可以不包
，直接用+input事件监听（addEventListener('input', ...)），更适合实时过滤 - 若需跳转到搜索页（如
/search?q=xxx），就保留，浏览器会自动拼 query 参数 - 别忘了加
role="search"到外层容器（如），提升屏幕阅读器识别率移动端适配和易用性细节
手机上搜索框常被缩放、错位或输入法遮挡，这些不是“样式问题”，而是交互断裂点。
立即学习“前端免费学习笔记（深入）”；
- 加
viewport元标签是基础，但更要设width=device-width, initial-scale=1，否则 iOS 可能强制缩放输入框 - 避免给
input设固定height，优先用padding控制高度，让行高自然适配不同字体渲染 - 在 iPhone 上，
type="search"会自动唤起带“搜索”键的软键盘，比type="text"更友好 - 如果搜索框在页面顶部吸顶，滚动时要确保它不被虚拟键盘顶出视口——CSS
position: sticky在部分安卓 WebView 下表现不稳定，可考虑 JS 监听resize或focus动态调整
- 加
