html表单不执行搜索，靠submit触发请求；method="get"将数据拼在url后，适合简单查询，method="post"将数据放请求体，适合敏感或大量数据；用formdata获取表单值更稳妥，注意复选框多选需name加[]；get请求需自动编码，推荐urlsearchparams；需防重复提交、空值校验及后端响应结构不一致问题。
HTML 表单本身不执行搜索，靠 submit 触发请求
浏览器里的 <form></form> 标签只是容器，它不“搜索”数据，也不处理数据。真正起作用的是用户点击提交后，表单把数据打包发给服务器——或者被 JavaScript 拦下来自己处理。
常见错误现象：点击按钮没反应、地址栏跳转但页面空白、输入内容没传到后台。多半是没配对 action 和 method，或 JS 里漏了 event.preventDefault()。
-
method="get"会把数据拼在 URL 后（如?q=abc&type=1），适合简单查询，能被缓存和分享 -
method="post"把数据放在请求体里，适合敏感或大量数据，不会暴露在地址栏 - 如果没写
action，默认提交给当前页面 URL，容易导致刷新或 404
用 JavaScript 拦截并读取表单值，别直接操作 input.value
很多人一上来就写 document.getElementById('kw').value，这在多数场景下能跑通，但遇到 textarea、select、带 name 的复选框时容易漏值或类型错乱。
更稳的方式是用 FormData 对象，它自动适配所有表单控件类型，还能处理文件上传。
立即学习“前端免费学习笔记（深入）”；
- 获取全部字段：
const data = new FormData(document.querySelector('form')) - 转成对象（需配合
Object.fromEntries()）：Object.fromEntries(data) - 注意：复选框多选时，
FormData只保留最后一个选中的值；要支持多值，得用name加[]（如name="tag[]"），再手动遍历data.getAll('tag[]')
GET 请求的表单数据会被编码，中文或特殊字符可能出错
浏览器对 method="get" 的表单会自动调用 encodeURIComponent 编码每个字段值。但如果你手动拼 URL 或用 fetch 发 GET 请求，就很容易忘记这步，导致后端收到乱码或空值。
典型错误现象：URL 中出现 %E4%BD%A0%E5%A5%BD 这种编码但后端解析失败、空格变成 + 而不是 %20、后端用 <code>request.query 拿不到字段。
- 检查是否用了
new URLSearchParams(data).toString()构造查询字符串（推荐，自动编码） - 避免手写
?q=xxx&u=yyy，尤其含中文、斜杠、问号时 - Node.js Express 默认能解码，但某些轻量框架（如
uWebSockets.js）需要自己调decodeURIComponent
搜索类表单别忽略防重复提交和空值校验
用户狂点搜索按钮、输空格提交、或连续触发多次请求，后端可能收到一堆无效请求，前端体验也卡顿。这不是“功能问题”，而是真实线上高频发生的问题。
- 禁用提交按钮后加
disabled属性：button.disabled = true，别只改文字 - 空值判断别只看
value === ''，要value.trim() === ''，否则用户输几个空格也能过 - 如果用
fetch，记得加AbortController防止上一个请求还没完，新请求又覆盖了响应处理逻辑
最麻烦的其实是后端返回结构不一致：有时候给 {list: []}，有时候直接给数组，有时候还夹个 message 字段。前端做搜索结果渲染前，最好先 console.log 看一眼实际响应体长什么样。
