type="search" 的清除按钮仅在有值时显示是规范行为；firefox不支持该伪元素属实现差异；移动端需满足type、form包裹及action存在才显示“搜索”键；name属性缺失会导致后端收不到q参数；label必须显式关联或包裹input以确保可访问性。
为什么 type="search" 的清除按钮不显示
清除按钮（×）只在 input 有值时才渲染，这是规范行为，不是 bug。常见误判点是：刚加载页面时没设 value，又没输入内容，自然看不到按钮。
排查步骤：
- 临时加
value="test"看按钮是否出现，确认是逻辑问题还是样式压制 - 检查 CSS 是否意外隐藏了伪元素：
input[type="search"]::-webkit-search-cancel-button { display: none; } - Firefox 不支持该伪元素，它默认不渲染清除按钮——这不是缺陷，而是实现差异
移动端键盘不显示「搜索」回车键
iOS 和部分安卓浏览器只在满足全部条件时才把软键盘底部按钮文字设为「搜索」：必须是 type="search"、必须包裹在 <form></form> 中、且 <form></form> 的 action 属性不能缺失（哪怕为空字符串）。
容易被忽略的细节：
-
enterkeyhint="search"是 HTML5 属性，iOS 16.4+ 才支持，旧系统无效 - 如果用 JS 拦截提交但没包
<form></form>，键盘会退化为「前往」或「完成」，破坏一致性 - 高度小于 36px 的
input在 iOS 上可能被键盘遮挡，建议最小设为height: 36px或使用min-height
表单提交时后端收不到 q 参数
最常见原因是漏写 name 属性。<input type="search"> 本身不携带字段名，提交时等价于发送空参数。
正确做法：
- 统一用语义化参数名，如
name="q"或name="s"，便于后端路由、日志聚合和分析工具识别 - 避免多个 search 框共用同一
name（比如「文章搜索」和「用户搜索」都叫q），否则值会覆盖 - 若 API 要求参数名为
term，别改name，应在 JS 提交时用FormData重写：formData.set('term', value)
label 点击无反应或读屏器读不出「搜索」
placeholder 不是标签，它在输入时消失，也不被屏幕阅读器稳定播报。WCAG 2.1 明确要求搜索框必须有持久、可编程式关联的标签。
两种合规写法任选其一：
- 显式
for/id关联：<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，除非极端 UI 限制——它绕过了浏览器对type="search"的语义增强逻辑
::-webkit-search-cancel-button，Firefox 靠 ::-moz-appearance，而 Safari 对 appearance: none 支持不完整，得单独处理。别指望一套 CSS 通吃。
