不仅是语义化标签，还触发浏览器原生搜索行为：safari/chrome 自动添加清除按钮、支持历史下拉与语音输入，但需设 name 属性、合理配置 autocomplete 及 css 重置（如 appearance: none、::-webkit-search-cancel-button），并必须包裹在 中才能正常提交。
为什么 <input type="search"> 不只是语义化标签
它会触发浏览器原生搜索行为：在 Safari 和 Chrome 中自动添加清除按钮（×）、支持历史记录下拉、部分系统还集成语音输入图标。但这些特性不是“开箱即用”，需要配合正确属性和 CSS 控制，否则容易出现样式错乱或功能失效。
- 必须设置
name属性，否则提交时无字段名，后端收不到值 - 若想禁用自动完成，加
autocomplete="off"；若想启用搜索历史，用autocomplete="search" - Safari 对
appearance: none支持不完整，清除按钮需用::-webkit-search-cancel-button单独重置
如何让 <input type="search"> 在所有浏览器中视觉一致
默认样式差异极大：Chrome 显示圆角+清除按钮，Firefox 完全无样式，Edge 有轻微内边距。直接写 border 或 padding 可能被 UA 样式覆盖。
- 先重置基础样式：
appearance: none; -webkit-appearance: none; - 清除按钮仅 WebKit 内核有效，需单独处理：
::-webkit-search-cancel-button { appearance: none; } - Firefox 需用
input[type="search"]::-moz-focus-inner { border: 0; }去掉聚焦虚线 - 推荐统一设
box-sizing: border-box，避免 padding 计算偏差
submit 行为与表单包裹的必要性
<input type="search"> 本身不提交，必须放在 <form></form> 内，或手动绑定事件。常见错误是只放 input，回车无响应。
- 最简可用结构：
<form action="/search"><input type="search" name="q"></form>，回车即提交 GET 请求 - 若用 JS 拦截，监听
form的submit事件比监听input的keydown更可靠（兼容空格、中文输入法未上屏等场景） - 不要依赖
onchange——用户还没按回车就失焦，会导致漏触发
移动端适配的关键细节
iOS 键盘顶部工具栏默认显示「搜索」按钮，但前提是 input 必须在 <form></form> 中且 type="search"。否则显示「前往」或「完成」，体验断裂。
- 确保父
<form></form>存在，且action有值（哪怕为空字符串） - 加
enterkeyhint="search"（HTML5 属性），iOS 16.4+ 会强制键盘显示搜索键 - 避免设置
height过小（如24px），iOS 键盘可能遮挡输入框，建议最小36px - 不要用
position: fixed+bottom: 0把搜索框压在键盘上方——iOS 不会自动滚动视口
name 属性缺失，导致开发时本地测试正常，上线后搜索参数根本传不到后端。
