结论：应使用 <div class="input-group"> 包裹 <input> 和 <button>，否则会导致焦点顺序错乱、可访问性失效及移动端点击区域异常；需确保 input 有 name 和 type="search"，button 设 type="submit" 并带 aria-label，统一 vertical-align、重置 button 默认样式，并为 button 设置 min-width: 44px。
直接说结论：用 <div class="input-group"> 包裹 <input> 和 <button>，而不是靠 float、flex 或 margin 硬凑——否则焦点顺序错乱、可访问性失效、移动端点击区域异常。
为什么不能用 CSS 手动拼接 input + button
常见错误是写成这样：
<input type="text" class="search-input"> <button type="submit">搜索</button>
问题很实在：
- 键盘 Tab 焦点会跳过 button（尤其当 button 没设
tabindex="0"） - 屏幕阅读器无法识别这是“一个搜索单元”，会把 input 和 button 当作两个独立控件播报
- 在 iOS Safari 上，button 可能被缩放或遮挡，触发区域变小
- 响应式断点时，手动写的
width和margin容易错位，尤其配合box-sizing: border-box缺失时
正确结构：用 input-group 语义容器
Bootstrap 的 <div class="input-group"> 是经过验证的模式，但即使不用 Bootstrap，也该模仿它的 DOM 结构逻辑：
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<div class="input-group"> <input type="search" name="q" aria-label="搜索关键词"> <button type="submit" aria-label="执行搜索">?</button> </div>
关键点：
-
<input>必须有name（否则提交无字段）、type="search"（触发清空按钮 + 语义化） -
<button>必须设type="submit"，且最好带aria-label（图标按钮没文字时必需） - 整个
<div>不要加role="group"—— 它不是 ARIA group，而是视觉+行为组合，用 CSS 控制布局即可 - 若需右侧按钮（如清空），优先用
type="search"自带的清空功能，而非额外加 button
自定义样式时必须覆盖的三个边界
很多自定义样式崩掉，是因为漏了这三处：
-
input和button的vertical-align默认值不同（input 是 baseline，button 是 middle），导致上下错位 → 统一设为vertical-align: middle -
button在 Chrome/Firefox 有默认border和padding，和 input 不一致 → 显式重置：border: none; padding: 0; line-height: normal; - 移动端点击热区太小 → 给
button加min-width: 44px（苹果推荐最小触控尺寸），同时确保input的height与之匹配
表单提交时 button 的 value 到底要不要传
很多人以为 <button type="submit" value="search">搜</button> 的 value 会随表单一起发出去——其实不会。
真实行为是：
- 只有
<input type="submit">的value会被序列化发送 -
<button type="submit">的value属性仅用于表单提交时标识“哪个按钮被点”，但前提是它有name属性；否则压根不参与提交 - 所以如果后端需要区分“搜索”和“高级搜索”两个按钮，得这么写：
<button type="submit" name="action" value="search">普通搜索</button> <button type="submit" name="action" value="advanced">高级搜索</button>
没 name 的 value 就是摆设。
