必须包裹在 中才能确保回车提交、清空按钮、移动端“搜索”软键盘等核心功能正常工作，脱离表单将导致 Safari 不显示清空按钮、Android 键盘不触发搜索键。
用
HTML5 原生支持搜索场景，直接用 type="search" 就能获得浏览器内置的搜索样式和行为（比如 Safari 和 Chrome 会自动显示 × 清空按钮、部分系统会触发搜索建议）。它不是装饰，而是有实际功能差异的类型。
常见错误是只写 然后靠 CSS 模拟搜索框——这样丢失了语义、无障碍支持（屏幕阅读器会读作“搜索”而非“文本输入”），也拿不到浏览器对 search 类型的优化处理。
为什么必须包在
单独一个 能渲染，但回车提交、清空按钮逻辑、移动端软键盘的“搜索”键触发，都依赖它处于有效的表单上下文中。脱离 后，Safari 可能不显示清空按钮，Android 键盘也可能仍显示“回车”而非“搜索”。
-
action属性决定提交目标，留空或设为"#"会导致页面跳转或刷新，建议明确指向搜索接口 - 加上
name="q"（或其他有意义的名称）才能让后端收到参数，例如提交后 URL 变成/search?q=html5 - 如果不想整页刷新，后续要用 JavaScript 阻止默认行为，但 HTML 结构仍应保持合法表单
search 类型在不同浏览器里的实际表现差异
不是所有特性跨平台一致：Chrome 和 Edge 对 search 输入框的清空按钮、历史记录下拉支持较好；Firefox 默认不显示 × 按钮（需用 ::-webkit-search-cancel-button 伪元素手动控制，但仅限 WebKit 内核）；Safari 在 iOS 上会自动启用 Spotlight 集成搜索建议。
立即学习“前端免费学习笔记（深入）”；
关键兼容点：
- 清空按钮无法用标准 CSS 通用选择器隐藏，
input[type="search"]::-webkit-search-cancel-button只在 Chrome/Safari 生效 - 想统一禁用搜索历史，可加
autocomplete="off"，但注意部分浏览器（如 Chrome 88+）会忽略该值，需改用autocomplete="nope"或动态生成随机 name 值 - 移动端软键盘是否显示“搜索”键，取决于
是否存在 +type="search"+name属性三者齐全
需要自定义样式时，别漏掉这些重置项
浏览器对 search 输入框有默认内边距和圆角（尤其 Safari），直接写 border-radius: 0 可能无效，因为 WebKit 会套一层 shadow DOM 容器。
稳妥做法：
- 重置所有内边距：
input[type="search"] { padding: 0.375rem 0.75rem; }，并显式覆盖padding-inline-start和padding-inline-end - 清除 WebKit 特有外观：
-webkit-appearance: textfield;（恢复为普通文本框基底） - 若要保留清空按钮但换图标，可用
input[type="search"]::-webkit-search-cancel-button { appearance: none; background: url(./x.svg) no-repeat center; }
真正容易被忽略的是：当用 JavaScript 动态插入 时，某些旧版 iOS Safari 不会自动绑定清空逻辑，必须在插入后手动触发一次 input 事件或聚焦再失焦来激活。
