search输入框必须设name属性才能提交数据，否则后端收不到q等参数；常见错误是仅写而遗漏name，导致url中连?都不出现；建议name值用q、keyword或search并与后端约定一致。
search输入框必须配name属性才能提交数据
不设 name 的 <input type="search"> 在表单提交时根本不会发任何值过去，后端收不到 q 或其他参数。这是最常被忽略的硬性规则。
常见错误写法：<input type="search" id="s"> —— 缺少 name，提交后 URL 里连 ? 都不出现。
-
name值建议用q、keyword或search，和后端约定一致 - 如果表单用了
method="get"，name就直接变成 URL 查询参数名（如/search?q=xxx） - 多个搜索条件共存时，每个
<input>都要独立name，不能重名（除非是同一组 radio）
多条件组合：checkbox + search + select 怎么一起提交
用户想同时选“分类”、输“关键词”、勾“仅显示有货”，这三类控件行为不同，但能统一走一个 <form></form> 提交。
关键点不是“能不能”，而是“怎么让它们协同工作”：
-
<select name="category"></select>：选中项的value会作为category=electronics发送 -
<input type="search" name="q">：输入内容原样发送，空值也会传q= -
<input type="checkbox" name="in_stock" value="1">：**只有勾选时才提交**；未勾选则整个参数消失（不是传in_stock=0） - 若需“未勾选也传默认值”，得额外加一个隐藏字段：
<input type="hidden" name="in_stock" value="0">，再把 checkbox 的name换成别的（如in_stock_toggle），靠 JS 控制显隐字段值
实时搜索和表单提交冲突怎么办
一边监听 input 做实时过滤，一边又保留传统表单提交，容易出现重复触发、状态错乱或防抖失效。
真实项目里最稳妥的做法是「二选一」，而不是强行共存：
- 如果页面是静态列表（比如本地商品数组），用纯 JS 实时搜索，禁用表单默认提交：
event.preventDefault()，且移除<form></form>包裹，只留<input type="search"> - 如果搜索结果需服务端渲染（如分页、权限控制、全文检索），那就放弃实时搜索 UI，改用带延迟的搜索按钮（如“搜索”旁加小放大镜图标），或用
submit触发跳转，再由后端返回新页面 - 折中方案：搜索框仍走表单提交，但用
fetch()拦截提交，手动发请求并更新 DOM，同时保持 URL 可分享（改用history.pushState）
移动端 search 键盘不显示“搜索”按钮？检查 autocomplete
iOS 和部分安卓浏览器只有在满足两个条件时，才会把键盘右下角的回车键换成“搜索”文字：
-
type必须是"search"（不是"text"） -
autocomplete属性必须存在且值为"on"或明确的语义值（如"search"）
所以正确写法是：<input type="search" name="q" autocomplete="search">。漏掉 autocomplete，哪怕 type 对了，iOS 键盘还是显示“前往”。
顺带一提：autofocus 在 iOS Safari 中默认被禁用（除非用户主动交互过），别依赖它自动聚焦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
