input[type="search"]是语义开关，启用清空按钮、搜索键盘、历史建议和屏幕阅读器正确播报；关闭则丢失全部隐式支持且无法用CSS/JS补全。
直接说结论：input[type="search"] 不是“带×的text”，它是语义开关——开了，浏览器才给你清空按钮、搜索键盘、历史优先建议和屏幕阅读器正确播报；关了（比如只用text），这些隐式支持全丢，且无法靠CSS或JS补全。
为什么回车没反应、软键盘不显示「搜索」键
根本原因：没包form，或form缺关键属性。
-
form必须存在，不能用div、section替代——否则 Safari 拒绝唤起搜索键盘，Tab 键跳过输入框，屏幕阅读器读作“编辑文本”而非“搜索编辑框” -
form至少要有method="get"（可省略，默认就是 GET）和非空action（哪怕写action="/search"，空字符串action=""在部分 iOS 版本中会失效） -
input必须有name（如name="q"），否则提交时参数根本不会被序列化，后端收不到任何值 - 不要监听
keyup判断 Enter——它捕获不到点击清除按钮后回车、语音搜索完成、软键盘「搜索」键等合法路径
清除按钮不显示？先分清是 bug 还是规范
清除按钮（×）只在input有值时渲染，这是 HTML 规范行为，不是 bug。Firefox 本来就不渲染它，也不是兼容性问题。
- 刚加载页面看不到按钮？临时加
value="test"验证：出现 → 是逻辑问题（比如 JS 清空后没触发重绘）；不出现 → 检查 CSS 是否压制：input[type="search"]::-webkit-search-cancel-button { display: none; } - Firefox 不支持
::-webkit-search-cancel-button，它用::-moz-search-cancel-button，但该伪元素兼容性极差，不建议依赖 - 用
input.value = ""清空，按钮自动消失；但input.value = " "（空格）不会触发清除状态，按钮仍保留——这点常被误用于“保持按钮可见”，实则破坏语义 - 禁用清除按钮的唯一可靠方式：改用
inputmode="text" role="search"组合，再自行实现清空逻辑（如 ESC 监听 + 按钮）
label 怎么写才算合规，placeholder 为什么不能顶替
placeholder 是提示，不是标签。它输入时消失，屏幕阅读器不稳定播报，WCAG 2.1 明确禁止用它替代label。
立即学习“前端免费学习笔记（深入）”；
- 必须二选一：
显式关联：<label for="site-search">站内搜索</label><input type="search" id="site-search" name="q">（注意id和for值完全一致且全局唯一）
包裹结构：<label>站内搜索<input type="search" name="q"></label>（更简洁，但确保样式不遮挡点击热区） - 禁用
aria-label替代原生label——它绕过浏览器对type="search"的语义增强，语音助手可能直接跳过该控件 - 移动端聚焦异常常源于
label未正确绑定：点击文字无响应，大概率是for/id不匹配，或input被pointer-events: none覆盖
name 参数命名和样式归一的隐藏成本
name不是随便起的字段名，它直接影响后端路由、日志聚合、A/B 测试和第三方分析工具识别效率。
- 推荐统一用
name="q"或name="s"——Google Analytics、Algolia、大部分 CMS 搜索路由都默认识别这两个参数名 - 若 API 要求
term，别硬改name，应在 JS 提交时用FormData.set('term', value)重写，保持前端语义与后端合约解耦 - 多个搜索框共用同一
name（如文章搜索和用户搜索都叫q）会导致值覆盖，应区分命名（name="post_q"/name="user_q"）或用不同form - 重置默认样式不能只写
input { ... }——WebKit 内核下input[type="search"]有独立 UA 样式，起步必须加：input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }，再自定义
真正难调的不是功能实现，而是跨浏览器清除按钮的样式归一和软键盘行为一致性——WebKit 支持::-webkit-search-cancel-button，Firefox 基本无视，Safari 对appearance的支持又随版本浮动。如果项目要求高度定制，不如从type="text"起手，自己控制清空逻辑和图标位置，反而更可控。
