语义正确的搜索框需用<form>包裹<input type="search">，设method="get"、name与后端约定（如name="q"），并配<button type="submit">；type="search"触发原生清除按钮、搜索键盘及历史补全，不可用type="text"替代。
用 <form> 和 <input type="search"> 搭出语义正确的搜索框
浏览器对 type="search" 有专门处理：自动添加清除按钮、默认样式微调、部分系统会启用搜索历史补全。不用它而硬套 type="text"，等于放弃原生能力。
必须把 <input> 放在 <form> 内，否则提交行为不可靠；method 推荐显式设为 "get"，因为搜索参数本就该暴露在 URL 中，方便复制、缓存和书签。
<form action="/search" method="get"><input type="search" name="q" placeholder="搜点啥..." required><button type="submit">搜索</button>
为什么 name 属性不能省，且值要和后端约定好
提交时，浏览器把 <input name="q"> 的值拼成 ?q=xxx 追加到 action 地址后。后端靠这个 name 键取值——如果写成 name="keyword" 却没同步改后端接收逻辑，结果就是搜了等于没搜。
常见错误：多个搜索输入共用一个 name（比如同时有“标题”“作者”两个框但都叫 q），导致参数覆盖。真要多条件，每个 <input> 必须用不同 name，如 title、author。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
禁用浏览器默认搜索建议的两种场景
某些内部系统或敏感词搜索，不希望用户看到历史记录或自动补全。这时加 autocomplete="off" 不一定管用——现代浏览器常忽略它。更可靠的是：
- 设
autocomplete="search"（明确告诉浏览器这是搜索场景） - 或用随机
name值（如name="q_12345"），让浏览器无法关联历史 - 若需彻底关闭，服务端返回响应头
Cache-Control: no-store配合前端清空sessionStorage
移动端键盘适配：确保回车键触发搜索
在 iOS 和 Android 上，type="search" 会让软键盘显示“搜索”而非“回车”。但如果误用了 type="text"，用户按回车只会换行或无反应——表单根本没提交。
验证方法很简单：真机打开页面，聚焦输入框，看键盘右下角文字是不是“搜索”。不是？立刻检查 type 值。别信模拟器，有些桌面 Chrome 的设备模拟模式不渲染真实键盘。
额外注意：iOS Safari 对 <button type="submit"> 的点击热区有时偏小，建议加 min-width: 60px 或用 <input type="submit"> 替代。
