<input type="search">最语义化且原生支持聚焦、清空、历史等功能；需设name、id与label提升可访问性；响应式用width:100%+max-width+box-sizing；回车需preventDefault并trim输入；焦点时条件全选；注意移动端兼容与键盘操作支持。
用 <input type="search"> 最简单也最语义化
浏览器原生支持搜索框的交互逻辑，比如自动聚焦、清空按钮、历史记录下拉，不用额外写 JS 就能用。它和 <input type="text"> 渲染几乎一样，但语义更准确，对屏幕阅读器和 SEO 更友好。
常见错误是直接用 <input type="text"> 加个 placeholder 写“搜索”，这会让辅助工具误判用途，也可能被某些浏览器禁用搜索优化（比如 Safari 的快速搜索建议）。
- 必须加
name属性，否则表单提交时这个字段不会被发送（例如name="q"是通用做法） - 推荐加上
id并配一个<label for="search-input">，提升可访问性 - 如果嵌在
<form>里，按回车会自动提交；不需要提交时，用onsubmit="return false"或监听submit事件并preventDefault()
怎么让搜索框响应式缩放又不崩布局？
固定宽度在小屏上会溢出，100% 宽度在大屏上又太宽。关键是用 max-width + width: 100% 组合，再配合 box-sizing: border-box 防止 padding 把宽度撑爆。
容易踩的坑是只设 width: 100% 却忘了父容器没设 display: flex 或 inline-block，导致搜索框换行或挤压旁边元素。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.search-input {<br> width: 100%;<br> max-width: 400px;<br> box-sizing: border-box;<br>} - 如果和按钮并排，用
display: flex包裹父容器，再给 input 设flex: 1，按钮设固定宽 - 移动端慎用
font-size: 1.2rem这类相对单位——某些安卓 WebView 对 rem 解析异常，改用px或em更稳
回车搜索后页面跳转，怎么避免刷新？
默认行为是提交表单并刷新页面，但多数现代搜索（比如站内搜索、API 调用）需要拦截这个动作，用 JS 获取输入值、发请求、更新结果区。
核心是阻止表单默认提交，并确保事件绑定时机正确——DOM 加载完再绑，否则 document.getElementById("search-form") 可能返回 null。
- HTML 中给 form 加
id="search-form"，input 加id="search-input" - JS 里用
document.getElementById("search-form").addEventListener("submit", function(e) { e.preventDefault(); const query = document.getElementById("search-input").value.trim(); if (query) { /* 发请求 */ } }); - 别漏掉
trim()：用户可能输空格，直接提交会导致空请求或报错 - 如果用
fetch()，记得处理response.ok和网络异常，否则搜索无反应却没提示，用户会以为卡了
搜索框获得焦点时自动全选文字？
这是提升效率的小细节，尤其适合重复搜索修改关键词的场景。但要注意不是所有场景都适用——比如带默认提示文字（placeholder）的搜索框，全选会立刻删掉提示，反而干扰用户。
真正该用的时机是：用户已经输过内容，再次点击或 tab 进来时希望快速替换。所以建议只在 input.value.length > 0 时才全选。
- 代码很简单：
document.getElementById("search-input").addEventListener("focus", function() {<br> if (this.value.length > 0) this.select();<br>}); - 不要用
onfocus="this.select()"写在 HTML 里，这样无法做条件判断 - 移动端 iOS Safari 有个已知问题：
input.select()在 focus 后立即调用可能失效，可加setTimeout(() => this.select(), 0)兜底
实际部署时最容易被忽略的是键盘操作支持：用户按方向键移动光标、按 Escape 清空输入、按 ↑/↓ 切换搜索历史——这些不是必须，但缺了就会让重度用户觉得“不够专业”。type="search" 已自带部分支持，但 history 行为依赖浏览器实现，不能完全依赖。
