搜索框不必用包裹但强烈建议；type="search"比text多清除按钮、软键盘“搜索”键及语义支持；防刷新需e.preventdefault()+formdata取值并校验空查询。
搜索框必须用 <form></form> 包裹吗？
不是必须，但强烈建议。浏览器对 <form></form> 有原生语义支持：回车提交、屏幕阅读器识别、移动端软键盘“搜索”按钮触发等。裸用 <input type="search"> 虽能输入，但缺失表单上下文，onsubmit 事件无法监听，event.preventDefault() 失效，后续防重复提交、统一校验也难落地。
实操建议：
-
<form></form>必须设置role="search"（提升可访问性） - 避免写
action="/search"纯前端搜索——会触发页面跳转；应设onsubmit="return false"或用event.preventDefault() - 给
<input>加name="q"（后端接收字段名，前端 URL 参数拼接也依赖它）
input type="search" 和 type="text" 有什么实际区别？
视觉和行为差异很具体：Chrome/Safari 中 type="search" 自带清除按钮（×），软键盘在 iOS/Android 上显示“搜索”而非“完成”；更重要的是，它被 W3C 定义为语义化搜索控件，aria-label 和 autocomplete="off" 的默认行为更合理。
但要注意：
- 清除按钮样式无法用 CSS 直接覆盖，需用
::-webkit-search-cancel-button伪元素（仅 WebKit） - 某些旧版安卓 WebView 不识别
type="search"，会降级为text，所以不要依赖其独有 API - 若需兼容 IE11，只能用
type="text"+ 手动加清空按钮逻辑
如何让搜索框真正“可提交”又不刷新页面？
核心是拦截默认提交行为，把输入值交给 JS 处理。不能只靠 return false，要兼顾可访问性和错误防御。
推荐写法：
<script> document.getElementById('search-form').addEventListener('submit', function(e) { e.preventDefault(); const query = new FormData(this).get('q')?.trim(); if (!query) return; // 这里调用你的搜索函数，比如 fetch(`/api/search?q=${encodeURIComponent(query)}`) }); </script>
关键点：
- 用
FormData取值，自动处理空格、编码、多字段扩展 - 检查
query是否为空，避免发空请求 - 别在
input上直接绑keyup触发搜索——用户还没输完就请求，浪费资源
移动端搜索按钮点击没反应？常见兼容问题
iOS Safari 和部分安卓浏览器中，“搜索”软键盘按钮点击后可能不触发 submit，尤其当 <form></form> 没有 method 属性或 method="get" 缺失时。
解决办法：
- 显式写
<form method="get"></form>（即使不发网络请求，语义上也正确） - 监听
input的search事件（仅 Chrome/Safari 支持），作为submit的补充：
const input = document.querySelector('input[type="search"]');
input.addEventListener('search', () => {
// 输入后点击清空按钮或软键盘搜索键时触发
document.getElementById('search-form').dispatchEvent(new Event('submit'));
});
注意：search 事件不会在用户按回车时触发（回车只触发 submit），所以两个事件最好都监听。
最易被忽略的是软键盘收起时机——搜索发起后别立刻清空 input，否则用户看不到自己搜了什么；也不要在 fetch pending 时禁用输入框，影响连续搜索体验。
