搜索表单必须用包裹，否则回车无法提交、tab导航断裂、屏幕阅读器无法识别，直接违反wcag 2.1 a级合规；input[type="search"]脱离form将丧失提交、焦点流和无障碍三类原生能力。
搜索表单必须用 <form></form> 包裹，否则回车无法提交、Tab 导航断裂、屏幕阅读器读不出“这是个搜索框”——这不是体验问题，是 WCAG 2.1 A 级合规直接失败。
为什么 <input type="search"> 一定要配 <form></form>
脱离 <form></form> 的 <input type="search"> 会立刻失去三类原生能力：按回车不触发提交、Tab 键跳过该输入框、屏幕阅读器无法将其识别为“搜索控件”。<form></form> 即使没写 action 和 method，也自带语义与焦点流管理。
- 别用
<div> 或 <code><span></span>替代<form></form>—— JS 绑定 submit 事件、禁用整组、无障碍上下文全失效 - 禁止写
onsubmit="return false"；JS 中应监听submit事件并调用event.preventDefault() -
<label></label>必须显式绑定：for="search-input"对应id="search-input"，或用包裹式写法<label>搜索<input type="search" id="search-input"></label> - 给
input[type="search"]设min-width: 200px+width: 100%+max-width: 600px - 父容器（如
<form></form>或包裹<div>）设 <code>display: flex+align-items: center，防垂直错位 - 加
box-sizing: border-box+min-height: 36px，避免内边距撑高后被裁剪 - 移动端慎用
white-space: nowrap——小屏会强制横向滚动，破坏体验 - 重置外观：
-webkit-appearance: none，再手动补border-radius和padding - 禁用拖拽缩放：
resize: none - 清除按钮用伪元素控制：
input[type="search"]::-webkit-search-cancel-button { appearance: none; } - 若需右侧图标（如放大镜），用
background-image+padding-right，别用绝对定位——否则键盘弹起时可能遮挡 - 统一用
display: inline-flex包裹所有控件（搜索框 + 下拉 + 按钮），设align-items: center - 用
gap: 8px控制间距，比单独设margin更稳定，无塌陷风险 - 下拉
<select></select>加min-width: 0，防止 Safari 锁死宽度导致溢出 - 清空按钮建议用
<button type="button"></button>并加aria-label="清空搜索"，避免误触提交
怎么让搜索框在窄屏下也不塌陷、不消失
响应式场景下，搜索框常因父容器收缩而视觉丢失。关键不是加固定宽度，而是控制最小可渲染尺寸和弹性边界。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
input[type="search"] 在 iOS Safari 上样式异常怎么办
iOS Safari 对 type="search" 默认启用 appearance: searchfield，导致 width 失效、清除按钮错位、无法自定义圆角等。
搜索框旁加筛选下拉或清空按钮，怎么对齐不打架
多个控件并排时，基线对齐差异和默认 margin 会让按钮“悬空”或文字错位，尤其在不同浏览器中表现不一。
最易被忽略的是：搜索框的 name 属性必须存在（如 name="q"），否则提交时后端收不到参数；还有，inputmode="search" 能在部分安卓键盘上唤起搜索键，但 iOS 不支持——别把它当跨平台保障。
