最简可用搜索框必须用包裹和，缺一不可：触发回车提交，type="search"提供清空按钮与移动端“搜索”键盘，name确保后端接收参数，type="submit"使按钮生效。
怎样用 <input type="text"> 和按钮组成基础搜索框
直接放一个 <input type="text"> 加一个 <button></button> 就能工作，但用户按回车没反应、按钮点击后不提交、样式错位——这些不是“没写完”，而是缺了关键约束。
最简可用结构必须包含：表单容器（<form></form>）、明确的 type="search" 或 type="text" 输入框、带 type="submit" 的按钮。否则浏览器不会触发默认提交行为。
-
<form></form>是必需的：没有它，<input>和<button></button>只是孤立控件，回车键无效，点击按钮也不会收集值 - 按钮必须写
type="submit"：默认<button></button>是type="submit"，但显式声明更安全；如果漏写或误写成type="button"，点击就完全没反应 - 输入框建议加
name属性（如name="q"）：否则提交时参数名为空，后端收不到字段
为什么 type="search" 比 type="text" 更适合搜索场景
type="search" 不是视觉装饰，它带来三处实际差异：清空按钮自动出现、移动端软键盘显示“搜索”键、部分浏览器对历史记录和自动补全有额外支持。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持
type="search"，且会自动在输入框右侧渲染 × 清除按钮（无需 JS） - iOS 和 Android 键盘会把回车键文字改为“搜索”，用户心理预期更匹配
-
type="search"在 Safari 中会启用地址栏搜索建议联动；Chrome 对其有独立的自动填充策略 - 注意：不要为
type="search"加autocomplete="off"，否则清空按钮和建议都会失效
点击按钮没跳转？检查 form 的 action 和 method
按钮点了没反应，大概率是 <form></form> 缺少 action，或者 action 值为空字符串或 # —— 浏览器会尝试提交到当前页，但若没后端处理，页面就“看起来没变化”。
- 调试时先设
action="/debug"，确认是否真提交：如果跳转到 404 页面，说明表单已发出请求；如果无跳转，问题还在前端绑定 - GET 提交（默认）适合搜索：
method="get"（可省略），参数拼在 URL 上，方便分享和刷新 - 避免用
method="post"做搜索：不支持书签，刷新会弹确认框，也不利于缓存 - 如果想用 JS 拦截提交，必须在
form.onsubmit里调用event.preventDefault()，否则仍会跳转
常见样式错位：按钮和输入框高度不一致怎么办
原生 <input> 和 <button></button> 默认盒模型、行高、边框、垂直对齐方式不同，直接并排容易上下偏移。
- 统一用
display: flex包裹是最稳方案：<form style="display:flex"> <input><button></button> </form> - 禁用默认边框和轮廓：
input, button { border: none; outline: none; }，否则 focus 时 Chrome 会加蓝框破坏对齐 - 设置相同
height和line-height（如height: 36px; line-height: 36px;），比依赖padding更可控 - 移动端记得加
font-size: 16px：iOS Safari 对小于 16px 的输入框会强制放大，导致布局抖动
form、type="search"、name、type="submit" 四者缺一不可。少一个，就可能在某个浏览器或某种交互下突然失效。
