form必须包裹在table单元格内，不能仅放input；正确做法是将完整form（含action、method、input、button）作为td直接子元素，否则submit按钮无提交行为。
form 必须包裹在 内，不能只放 input
直接把 <form> 标签丢进表格单元格里是可行的，但常见错误是只把 <input> 和 <button> 塞进 <td>，漏掉 <form> 本身——这样点击按钮不会提交，因为没有表单上下文。浏览器会把 submit 按钮当成孤立元素，不触发任何行为。
正确做法是整个 <form>（含 action、method、input、button）作为 <td> 的直接子元素。例如：
<table>
<tr>
<td><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度"></td>
<td>
<form action="https://www.baidu.com/s" method="get">
<input type="search" name="wd" autocomplete="off" placeholder="搜索...">
<button type="submit">百度一下</button>
</form>
</td>
</tr>
</table>
-
action 必须是 https://www.baidu.com/s（注意 https，http 已失效）
-
name="wd" 不能写成 word 或 q，否则百度后端不识别参数
- 不要给
<form> 加 onsubmit="return false" 或其他 JS 阻断，默认跳转才是预期行为
表格布局下 button 与 input 对齐问题
默认情况下，<input type="search"> 和 <button> 在 <td> 里容易上下错位或高度不一致，尤其在 Chrome/Firefox 中表现不同。这不是 bug，而是表单控件默认 vertical-align 和 line-height 不统一导致的。
最简解决方式是给这两个元素加统一样式：
立即学习“前端免费学习笔记（深入）”；
form input, form button {
vertical-align: middle;
height: 36px;
line-height: 36px;
margin: 0;
}
- 避免用
display: flex 包裹它们——表格单元格对 flex 支持不稳定，尤其 IE/旧 Edge
- 别依赖
padding 调整高度，容易在不同浏览器中渲染偏差
- 如果用了
<table> 的 border-collapse: collapse，记得给 <form> 设 margin: 0，否则外边距可能被表格样式吞掉
target="_blank" 在表格中打开新页是否安全？
可以加，但要注意：在 <form> 上设 target="_blank" 后，百度结果页会在新标签页打开，这本身没问题；但部分浏览器（如 Safari）会对 target="_blank" 自动加上 rel="noopener"，防止 opener 泄露，而百度页面本身不依赖 window.opener，所以无需额外处理。
不过如果你在表格里同时有多个搜索框（比如每行一个），建议显式加 rel="noopener"：
<form action="https://www.baidu.com/s" method="get" target="_blank" rel="noopener">
- 不加
rel="noopener" 不影响功能，但存在轻微安全风险（理论上可被百度页脚本反向控制原页面）
- 不要用
target="_self" 试图让结果页覆盖当前表格页——用户很可能正在看表格数据，强制跳转会丢失上下文
- 如果表格嵌在 iframe 里，
target="_blank" 仍有效，但需确保父页面没设 sandbox 属性禁用弹窗
本地双击打开 HTML 文件时搜索失效
这是最容易卡住人的点：代码写得完全正确，但在本地文件系统（file:// 协议）下双击打开 index.html，点击搜索按钮后跳转失败，或百度返回“抱歉，没有找到相关内容”这类异常页。
根本原因是百度服务校验 Referer 头，而 file:// 页面发起的请求没有合法 Referer，部分 CDN 节点直接拒绝或降级响应。
- 必须用本地 HTTP 服务预览：比如
npx serve、VS Code 的 Live Server 插件、Python 的 python -m http.server
- 检查地址栏是否为
http://localhost:xxxx/ 或类似，而不是 file:///xxx/index.html
- 即使加了
autocomplete="off" 或 type="search"，也无法绕过这个 referer 限制
真正在生产环境部署时，只要走 http:// 或 https:// 域名，这个问题就不存在——它只折磨开发阶段的本地预览环节。
直接把 <form> 标签丢进表格单元格里是可行的，但常见错误是只把 <input> 和 <button> 塞进 <td>，漏掉 <form> 本身——这样点击按钮不会提交，因为没有表单上下文。浏览器会把 submit 按钮当成孤立元素，不触发任何行为。
正确做法是整个 <form>（含 action、method、input、button）作为 <td> 的直接子元素。例如：
<table>
<tr>
<td><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="百度"></td>
<td>
<form action="https://www.baidu.com/s" method="get">
<input type="search" name="wd" autocomplete="off" placeholder="搜索...">
<button type="submit">百度一下</button>
</form>
</td>
</tr>
</table>
-
action必须是https://www.baidu.com/s（注意 https，http 已失效） -
name="wd"不能写成word或q，否则百度后端不识别参数 - 不要给
<form>加onsubmit="return false"或其他 JS 阻断，默认跳转才是预期行为
表格布局下 button 与 input 对齐问题
默认情况下，<input type="search"> 和 <button> 在 <td> 里容易上下错位或高度不一致，尤其在 Chrome/Firefox 中表现不同。这不是 bug，而是表单控件默认 vertical-align 和 line-height 不统一导致的。
最简解决方式是给这两个元素加统一样式：
立即学习“前端免费学习笔记（深入）”；
form input, form button {
vertical-align: middle;
height: 36px;
line-height: 36px;
margin: 0;
}
- 避免用
display: flex包裹它们——表格单元格对 flex 支持不稳定，尤其 IE/旧 Edge - 别依赖
padding调整高度，容易在不同浏览器中渲染偏差 - 如果用了
<table>的border-collapse: collapse，记得给<form>设margin: 0，否则外边距可能被表格样式吞掉
target="_blank" 在表格中打开新页是否安全？
可以加，但要注意：在 <form> 上设 target="_blank" 后，百度结果页会在新标签页打开，这本身没问题；但部分浏览器（如 Safari）会对 target="_blank" 自动加上 rel="noopener"，防止 opener 泄露，而百度页面本身不依赖 window.opener，所以无需额外处理。
不过如果你在表格里同时有多个搜索框（比如每行一个），建议显式加 rel="noopener"：
<form action="https://www.baidu.com/s" method="get" target="_blank" rel="noopener">
- 不加
rel="noopener"不影响功能，但存在轻微安全风险（理论上可被百度页脚本反向控制原页面） - 不要用
target="_self"试图让结果页覆盖当前表格页——用户很可能正在看表格数据，强制跳转会丢失上下文 - 如果表格嵌在 iframe 里，
target="_blank"仍有效，但需确保父页面没设sandbox属性禁用弹窗
本地双击打开 HTML 文件时搜索失效
这是最容易卡住人的点：代码写得完全正确，但在本地文件系统（file:// 协议）下双击打开 index.html，点击搜索按钮后跳转失败，或百度返回“抱歉，没有找到相关内容”这类异常页。
根本原因是百度服务校验 Referer 头，而 file:// 页面发起的请求没有合法 Referer，部分 CDN 节点直接拒绝或降级响应。
- 必须用本地 HTTP 服务预览：比如
npx serve、VS Code 的 Live Server 插件、Python 的python -m http.server - 检查地址栏是否为
http://localhost:xxxx/或类似，而不是file:///xxx/index.html - 即使加了
autocomplete="off"或type="search"，也无法绕过这个 referer 限制
真正在生产环境部署时，只要走 http:// 或 https:// 域名，这个问题就不存在——它只折磨开发阶段的本地预览环节。
