按钮必须放在<form>内且指定type="submit"，否则点击无反应；浏览器默认<button>在表单内type为submit，但脱离上下文即失效；需显式声明type="submit"并确保所有提交字段均有name属性。
按钮必须放在 <form> 内且指定 type="submit"
很多初学者把 <button> 单独写在表单外，或忘了设 type，结果点击毫无反应。浏览器默认 <button> 的 type 是 "submit"，但仅在表单内才有效；一旦脱离上下文，它就变成普通按钮，不触发提交。
正确写法：
<form action="/search" method="GET"> <input type="text" name="q" placeholder="搜索关键词"> <button type="submit">搜索</button> </form>
- 务必确认
<button>在<form>开闭标签之间 - 显式写
type="submit"，避免某些框架或重置样式影响默认行为 - 不要用
onclick="form.submit()"手动调用——绕过表单验证、忽略required、不携带name值
method="GET" 是站内搜索的合理选择
站内搜索本质是“查数据”，不是“改状态”，用 GET 能让 URL 可复制、可书签、可被浏览器历史记录，也方便调试（直接看地址栏参数）。
常见误区：
立即学习“前端免费学习笔记（深入）”；
- 误用
POST：导致刷新页面重复提交、无法后退到上一个搜索结果、服务端需额外处理幂等性 - 忽略
name属性：表单字段没name，提交时该字段根本不会出现在 URL 参数里（例如/search?q=xxx中的q就来自<input name="q">） - 在
action里硬编码带参数的 URL（如action="/search?q="）：这会让实际提交变成GET /search?q=?q=xxx，参数重复或丢失
用 <input type="submit"> 还是 <button type="submit">？
两者都能提交，但语义和控制力不同：
-
<input type="submit">：内容只能是纯文本（value属性），不能嵌入图标、<span>或其他 HTML -
<button type="submit">：支持任意 HTML 内容，比如加个放大镜图标：<button type="submit"><i class="icon-search"></i> 搜索</button></li> <li>兼容性无差别，现代浏览器都支持；但若需严格语义化（尤其无障碍访问），<code><button>
更易添加aria-label
只要别漏掉 type="submit"，二者效果一致。选哪个取决于你是否需要富内容按钮。
搜索框回车失效？检查是否有多个 input 且未设 name
当表单里有多个 <input>（比如隐藏的 category 字段 + 搜索输入框），但其中某个没设 name，部分浏览器（尤其是旧版 Safari 和某些 Android WebView）可能拒绝回车提交，或只提交有 name 的字段而忽略回车逻辑。
- 所有参与提交的字段（包括隐藏域、下拉选择等）都必须有
name属性 - 确保只有一个文本输入框用于用户输入（否则回车可能聚焦到别的
input上） - 如果用了
autocomplete="off"或第三方 JS 库接管了表单，可能拦截原生回车行为——先禁用 JS 确认是否是它导致的
最简验证方式：删掉所有非必要字段，只留一个 <input name="q"> 和一个 <button type="submit">，测试回车是否生效。
