不是必须，但用 type="search" 才有语义和原生优化，如清除按钮、搜索键盘、无障碍支持；还需配合 name、label、id 和 form 才算完整语义。
search 输入框必须用 type="search" 吗？
不是必须，但用了才有语义和原生优化。浏览器识别 type="search" 后会自动添加清除按钮（×）、可能触发搜索建议、在 Safari 和 iOS 键盘上显示「搜索」回车键，而不是「前往」或「完成」。如果只写 type="text"，这些行为全丢失，且无障碍工具（如屏幕阅读器）无法正确传达「这是搜索入口」。
怎么写才算语义正确的 search 框？
光改 type 不够，得配合 name、id 和 label。否则即使类型对了，仍算语义残缺：
-
name值建议为q或search（服务端接收时常用） - 必须用
<label for="xxx">显式关联，不能靠视觉包裹（否则触屏点击区域小、读屏器可能跳过） -
id和for值要严格一致，且全局唯一
示例：
<label for="site-search">搜索网站</label><br><input type="search" id="site-search" name="q" placeholder="输入关键词...">
为什么加了 type="search" 还没清除按钮？
常见原因有三个：
立即学习“前端免费学习笔记（深入）”；
- 浏览器不支持：IE 完全不支持
type="search"，旧版 Android WebView 也可能失效 - CSS 覆盖了默认样式：比如写了
input::-webkit-search-cancel-button { display: none; }或重置了所有伪元素 - 没设
value且用户未输入——清除按钮只在有值时才显示（这是标准行为，不是 bug）
调试时可临时加 value="test" 看按钮是否出现，确认是逻辑问题还是样式压制。
要不要加 form 包裹？
要，尤其当搜索要提交时。单独的 input 没有提交上下文，回车键可能无效或触发意外行为。正确写法是：
<form action="/search" method="GET"><br> <label for="q">搜索</label><br> <input type="search" id="q" name="q" required><br> <button type="submit">搜索</button><br></form>
注意：method="GET" 是关键——能让关键词出现在 URL 中，利于分享和后退；required 属性防止空提交；button 比 input[type="submit"] 更易样式控制，也更语义。
真正容易被忽略的是：很多项目把 search 框塞进 header 里却不配 form，只靠 JS 监听回车，结果键盘用户无法用 Enter 提交，也不符合表单交互预期。
