答案是必须用包裹和，并设置method="get"、name属性，才能确保回车提交、软键盘搜索键生效及无障碍支持；仅用不包则功能失效。
直接用 <form></form> 包裹 <input> 和 <button type="submit"></button>，再加 display: flex 布局，就能稳定对齐、响应回车、适配移动端——不需要 JS 监听 keypress，也不用 hack 清除默认边距。
怎么让搜索按钮和输入框在一行且不错位
错位根本原因不是 margin 没清零，而是 <input> 和 <button></button> 的基线（baseline）和行高（line-height）默认值不一致。Flex 布局能绕过这个坑，但得配对设置：
- 父容器设
display: flex; align-items: center;，不是flex-start -
<input>和<button></button>都显式写font: inherit; line-height: normal; - 避免给
<button></button>设vertical-align（flex 下无效，还可能干扰） - 如果按钮高度略矮，优先调
padding而非height，否则在 Safari 中易出现 1px 锯齿
为什么不能只用 <input type="search"> 不包 <form></form>
单独一个 <input type="search"> 在多数浏览器里按回车不会触发任何行为，软键盘「搜索」键也无效，屏幕阅读器无法识别为可操作控件。必须包裹在 <form></form> 中并满足三个条件：
-
method="get"：保证关键词出现在 URL 查询参数中，利于分享和缓存 -
name属性（如name="q"）：否则提交时参数名为空，后端收不到值 -
<button type="submit"></button>：让点击、回车、软键盘搜索键三者行为统一，不用额外绑定事件
<button></button> 和 <input type="button"> 到底用哪个
无条件选 <button></button>。它支持嵌套 HTML（比如内联 <svg></svg> 图标）、样式更可控、禁用状态（disabled）在 Safari 和旧版 Edge 中表现更一致。而 <input type="button"> 有硬伤：
- 内容只能是纯文本（
value属性），加图标要靠 background-image，难适配暗色模式 - 某些浏览器下
disabled仍响应 hover 或 focus 样式，造成误导 - 没设
type的<button></button>在部分浏览器会默认当submit处理，所以务必显式写type="button"或type="submit"
移动端软键盘遮住输入框怎么办
这不是按钮或布局问题，是视口滚动逻辑缺失。iOS 尤其明显：焦点进入后页面不自动上推。最轻量解法是监听 focus 事件，手动滚动：
document.querySelector('input[type="search"]').addEventListener('focus', () => {
setTimeout(() => {
document.querySelector('input[type="search"]').scrollIntoView({ block: 'nearest' });
}, 100);
});
注意不能用 immediate，因为软键盘弹出有延迟；也不能依赖 resize 事件，iOS 不可靠。如果页面已用框架（如 React），需确保 ref 绑定正确，否则 scrollIntoView 会找不到节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
