<input type="submit">本质是表单提交控件，须置于<form>内，method推荐get，action指定搜索地址，输入框需设name属性（如name="q"），按钮文字用value控制；<button type="submit">更灵活但默认行为一致，兼容性要求高时优先选<input>。
用 <input type="submit"> 直接生成搜索按钮
不需要额外 JS 就能工作的搜索按钮，本质就是一个表单提交控件。关键不是“按钮长什么样”，而是它绑定在哪个 <form> 里、往哪发、带什么参数。
-
type="submit"必须放在<form>内部，否则点击无反应 -
form的method推荐用get（便于调试、可书签化），action填目标搜索地址，比如https://www.baidu.com/s或你自己的后端接口 - 输入框必须带
name属性（如name="q"），否则提交时参数不会被带上——这是新手最常漏的一点 - 按钮文字用
value控制（如value="搜索"），别写成 innerHTML 或 textContent
为什么不用 <button type="submit">？
它更灵活，支持嵌套图标、换行、富文本，但默认行为和 <input type="submit"> 完全一致。区别只在渲染控制力：
- 某些老版本 IE 对
<button>的value解析有偏差，若需兼容性兜底，优先选<input> -
<button>在未设type时默认是submit，但显式写上更安全，避免意外触发表单提交 - 如果按钮里要放 SVG 或 emoji（比如
<button type="submit">?</button>），<button>是唯一选择
搜索按钮配 <input type="search"> 的注意事项
type="search" 本身不触发提交，只是语义化输入框。它和搜索按钮是“搭档”，不是替代关系：
- 必须手动给它加
name（例如name="q"），否则提交时这个字段值为空 - Safari/iOS 下它的清空按钮（×）可能被
appearance: none干掉，重置样式前先测试点击是否仍有效 - 不要监听
onkeyup来联动按钮——用户粘贴、语音输入、长按字母都会漏事件；真要实时响应，用oninput+ 防抖 - 若想回车也能搜，确保按钮在
<form>内，且表单没被 JSpreventDefault()拦截
绕过表单、纯 JS 触发的搜索按钮怎么写
当你要把搜索词拼进 URL 跳转（比如跳百度）、或调用 API（比如必应搜索），就不需要真实表单提交，而是用 JS 拿值 + 手动跳转/fetch：
立即学习“前端免费学习笔记（深入）”；
- 按钮设
type="button"，避免默认提交行为 - 绑定
onclick或addEventListener('click', ...)，从document.getElementById('my-input').value取值 - 拼 URL 示例：
window.location.href = 'https://www.baidu.com/s?wd=' + encodeURIComponent(inputValue) - 调 API 示例：用
fetch()发请求，记得加headers: { 'Ocp-Apim-Subscription-Key': 'xxx' }（必应）或对应鉴权头
容易被忽略的是：用户输入空格、特殊符号（如 &、=）必须用 encodeURIComponent() 编码，否则 URL 会截断或报错。
