给网页添加百度搜索代码：从表单配置到结果页测试

给网页加一个百度搜索框，最简单的做法不是在自己的网站里实现搜索引擎，而是把用户输入的关键词提交给百度的搜索结果页。用户在表单中输入内容并提交后，浏览器会打开百度搜索页面，搜索词随请求一起传过去。

这种方式实现成本低，不需要在网站服务器上安装搜索服务，也不必调用浏览器端的跨域接口。它适合希望提供“用百度搜索本站内容”入口的网站。不过，它不等于站内搜索服务：结果由百度按其收录情况和排序规则提供，页面是否能搜到、何时更新以及结果如何排列，都不由这段表单代码保证。

一、先理解最小工作原理

百度网页搜索常用的结果页地址是 https://www.baidu.com/s。搜索词通过名为 wd 的查询参数提交。例如，访问以下地址时，浏览器会请求百度搜索“网页开发”：

https://www.baidu.com/s?wd=%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91

这里的百分号编码是 URL 对中文字符进行编码后的形式。实际使用 HTML 表单时，不需要自己把中文转成百分号编码；浏览器会根据表单提交规则处理字段值。对应的表单结构是：

<form action="https://www.baidu.com/s" method="get">
  <label for="baidu-query">搜索本站</label>
  <input id="baidu-query" name="wd" type="search">
  <button type="submit">百度搜索</button>
</form>

这段代码的关键点只有几个：

• action 指向百度搜索结果页地址。
• method="get" 表示将表单字段放进 URL 的查询字符串中。
• 搜索框的 name 是 wd，百度结果页据此接收搜索词。
• 提交按钮的类型是 submit，点击后浏览器提交表单。

字段的 name 不是装饰属性。若只写 id 而没有 name，该字段通常不会作为表单参数提交。反过来，输入框的 id 主要用于关联标签或脚本，不会替代 name。

二、适用场景与不适用场景

适合的场景

• 为网站增加外部搜索入口：访客输入关键词后，在百度查看与该关键词相关的网页。
• 没有自建搜索服务的小型网站：不需要维护索引、分词、排序或搜索接口。
• 希望访客搜索已被百度收录的页面：可以把关键词与站点范围组合后提交。
• 静态网页或内容站：只靠 HTML 表单即可工作，不依赖客户端框架或后端程序。

不适合的场景

• 要求结果仅来自实时数据库：百度搜索不是网站数据库的实时查询接口，内容可能未被收录或尚未更新。
• 要求精确过滤、权限控制或业务排序：搜索结果排序和展示由百度决定，表单不能代替自有搜索后端。
• 搜索内容涉及登录用户的私有数据：不能把百度搜索当作私有资料检索系统。公开搜索引擎不会因此获得站内权限，也不应将敏感信息放进搜索词。
• 要求结果直接嵌在当前页面：普通表单提交会导航到结果页，不会自动把百度结果加载进本站页面。

若业务需要结果页留在自己的域名、搜索内部商品库存，或根据登录权限过滤内容，应评估自建搜索接口或合适的搜索服务，而不是把百度结果页表单当成等价方案。

三、可直接使用的基础版本

下面是一份完整的表单片段。将其放入网页的正文区域即可使用。代码中没有依赖 JavaScript，表单在浏览器正常联网且百度搜索服务可访问时即可提交。

<form action="https://www.baidu.com/s" method="get">
  <label for="baidu-query">输入关键词</label>
  <input
    id="baidu-query"
    name="wd"
    type="search"
    placeholder="例如：网站使用说明"
    required
  >
  <button type="submit">在百度中搜索</button>
</form>

required 是浏览器的原生表单校验，用来阻止空值提交。它只改善当前表单的交互，不是安全控制，也不能保证搜索词有意义。若业务上允许空搜索，可以去掉它。

如果希望让表单更易于键盘和屏幕阅读器使用，应保留与输入框关联的 label。占位提示文字不能完全替代标签，因为用户输入后占位文字会消失，而且辅助技术对占位文字的处理方式并不等同于标签。

需要注意，空格、中文和标点在 GET 请求中会被浏览器编码。不要为了“处理中文”而先对输入值调用 encodeURIComponent，再交给表单提交；这可能造成重复编码，导致查询词显示异常。原生表单提交一般已足够处理这类编码工作。

四、把搜索范围限定到本站

若要让百度优先搜索某个站点，可以将站点限定语放进搜索词，例如 site:example.com 使用说明。这是一种搜索查询语法，不是 site 这个 HTML 表单参数，也不是对搜索结果的完整性承诺。只有被百度发现并收录、且符合其搜索规则的页面，才可能出现在结果中。

下面的例子在用户输入前添加站点限定语。请将 www.example.com 替换为自己希望限定的主机名。域名应根据实际网站设置填写；如果网站存在多个域名或子域名，实际匹配范围还要结合百度对该查询语法的处理和站点收录情况检查。

<form action="https://www.baidu.com/s" method="get">
  <label for="site-query">搜索本站内容</label>
  <input
    id="site-query"
    type="search"
    name="wd"
    placeholder="输入关键词"
    required
  >
  <input
    type="hidden"
    name="wd"
    value="site:www.example.com"
  >
  <button type="submit">搜索</button>
</form>

上面的写法有一个问题：两个控件使用了相同的 name="wd"。虽然浏览器会提交两个同名字段，但百度如何处理重复的 wd 并不应当被当作稳定接口。因此，不建议直接照用这段重复字段的实现。下面改用一个隐藏字段和 JavaScript，在提交前生成唯一的 wd 值：

<form id="site-search" action="https://www.baidu.com/s" method="get">
  <label for="site-query">搜索本站内容</label>
  <input id="site-query" type="search" placeholder="输入关键词" required>
  <input id="site-query-value" type="hidden" name="wd">
  <button type="submit">搜索</button>
</form>

<script>
  document.getElementById("site-search").addEventListener("submit", function () {
    const query = document.getElementById("site-query").value.trim();
    document.getElementById("site-query-value").value =
      "site:www.example.com " + query;
  });
</script>

脚本通过 DOM 属性赋值，不把用户输入拼进 HTML 字符串，因此不会因为输入中包含引号或尖括号而将其解释为标记。这里的脚本只是组装搜索词，不是安全过滤器。若网站有内容安全策略（CSP），内联脚本可能被策略拦截；可将脚本放入符合站点策略的外部 JavaScript 文件，或按站点的 CSP 规则配置。

若不希望依赖 JavaScript，可以由服务端生成完整搜索词，或采用经过实际浏览器测试且目标搜索服务支持的表单结构。不要仅凭其他网站的参数样例推断重复参数、未公开参数或隐藏参数有稳定行为。

五、新窗口打开与链接安全

默认情况下，提交表单会在当前标签页打开结果。若产品确实需要在新标签页打开，可以给表单添加 target="_blank"：

<form action="https://www.baidu.com/s" method="get" target="_blank">
  <label for="new-tab-query">搜索</label>
  <input id="new-tab-query" name="wd" type="search" required>
  <button type="submit">百度搜索</button>
</form>

这会让浏览器在新浏览上下文打开结果。对于通过脚本打开新窗口的代码，应特别留意弹窗拦截和窗口引用安全；而原生表单提交不需要自行调用 window.open。若改用 JavaScript 创建新窗口，不要把未经校验的用户输入拼进窗口地址之外的 HTML 文档中。

是否新开标签页是产品体验选择，不是搜索功能的技术要求。新标签页也可能让部分用户感到意外，因此最好通过按钮文案或辅助说明让行为清晰。

六、参数边界：哪些可以依赖，哪些不要想当然

可靠的基本约定

上文示例依赖的是搜索结果页路径和查询字段 wd。应把它当作提交到百度网页搜索的一种常用表单方式，而不是一套完整、固定的搜索 API。百度搜索页面的实现、参数处理和产品规则可能变化，部署前应在目标环境实测。

不要随意添加网上流传的参数

一些代码会额外添加 tn、rsv_*、ie 或其他字段。这些名称可能出现在搜索页面 URL、浏览器请求或第三方示例中，但仅凭出现过并不能说明它们是稳定、公开、长期兼容的开发接口。除非有明确的百度官方文档支持并满足具体需求，否则不要依赖这类参数，也不要向读者承诺它们能固定排序、指定结果样式或控制收录。

类似地，给表单添加自定义参数，不代表百度会识别它。HTML 可以提交任意字段，但接收方是否处理、如何处理，由接收方决定。若未知参数被忽略，表单仍可能能搜；这不构成参数有效的证据。

URL 长度与输入限制

GET 表单会把搜索词放进 URL。不同浏览器、代理、服务器和服务端对 URL 长度可能有不同限制，不能假定任意长的输入都能可靠提交。通常搜索框应限制为合理的短文本，并避免把大段内容、个人资料或整篇文章作为查询词。限制输入长度可以改善体验，但不能替代服务端对其他输入的处理。

例如可以给输入框加上长度约束：

<input
  id="limited-query"
  name="wd"
  type="search"
  maxlength="200"
  aria-label="搜索关键词"
>

maxlength 的单位和浏览器处理细节应按 HTML 表单控件规范理解，它只是客户端约束；用户仍可通过其他方式构造请求。对于提交给百度的普通搜索框，这类限制主要用于避免明显不合理的长输入，而不是访问控制。

七、编码与安全：搜索框不是安全边界

将关键词通过原生 GET 表单提交给百度时，浏览器会按表单规则编码字段。由于目的地是百度，搜索词会出现在发往百度的请求中，并可能出现在浏览器历史记录、代理日志或其他与 URL 处理有关的位置。不要把密码、身份证号、访问令牌、内部机密或其他敏感信息放入搜索框。

从本站页面代码角度看，单纯提交搜索词不会自动执行脚本。风险通常出现在网站自己把用户输入插入 HTML、脚本或不安全的 URL 中。例如，不要用字符串拼接的方式把搜索词写进 innerHTML：

// 不推荐：把用户输入当作 HTML 解析
resultContainer.innerHTML = "你搜索了：" + query;

若需要在本站显示用户输入，应优先使用文本接口：

// 推荐：按纯文本写入页面
resultContainer.textContent = "你搜索了：" + query;

如果服务端要把输入值写入 HTML 页面，应根据输出位置进行正确的上下文转义；仅做一次通用“过滤”并不能适用于 HTML、属性、JavaScript 和 URL 等所有上下文。提交给百度的普通表单也不能替代应用自身需要的校验、日志脱敏或隐私保护。

此外，不能通过浏览器端 fetch 直接抓取百度搜索结果并假设一定可用。浏览器的跨域访问受到同源策略和目标站点跨域响应头约束；百度搜索页面也不是默认面向第三方网页的 CORS 数据接口。需要官方支持的机器接口时，应查阅相应服务的官方说明及使用条件，而不是解析搜索结果页面或依赖未公开请求。

八、从本地到线上逐步测试

1. 检查表单是否能提交

先在开发环境打开包含表单的页面，输入一个简单关键词并提交。观察浏览器地址栏是否导航到百度搜索结果页，地址中是否带有 wd 参数。中文显示为百分号编码属于正常现象；有些浏览器会以更易读的形式显示 URL，不能只凭地址栏的视觉形式判断编码是否成功。

2. 检查查询词是否完整

分别测试中文、空格、英文、数字以及常见标点。确认输入中的空格没有让查询内容被意外截断，且页面能够到达百度。不要在测试时先手工双重编码关键词；这会把编码后的百分号也作为查询内容提交。

3. 检查站点范围

对于使用 site: 的版本，确认最终提交的 wd 值由站点限定语和用户关键词组成，且只存在一个预期的 wd 字段。再检查百度结果是否出现目标站点页面。没有结果不一定意味着表单错误，也可能是相关页面尚未收录、站点范围写错，或百度当前没有提供匹配结果。

4. 检查键盘与校验行为

用键盘 Tab 键定位输入框和按钮，按 Enter 提交；尝试空内容提交，确认 required 是否按预期工作；检查标签是否能准确描述输入框。若使用新标签页，再验证浏览器是否按预期打开结果，以及用户是否知道这一行为。

5. 检查实际部署环境

本地可用不代表生产环境一定正常。应在 HTTPS 页面上测试，确认表单提交仍指向 HTTPS 的百度地址；查看站点的 CSP 是否阻止了相关脚本；检查内容管理系统、模板引擎或构建工具是否改写了表单属性。普通外部表单提交不需要配置本站的跨域读取权限，因为页面并未读取百度响应内容。

可以用浏览器开发者工具的网络面板检查提交请求的 URL、请求方法和查询参数。调试时不要把包含敏感信息的完整 URL 复制到公开工单或日志中。

九、常见错误与排查方法

错误一：搜索框没有 name

如果输入框只有 id="query"，表单通常不会把它作为查询字段提交。应补上 name="wd"，并确认拼写正确。

错误二：字段名写成 q 或其他名称

字段名由接收方约定。不能因为其他搜索服务使用 q，就认为百度结果页也会按同一字段读取。使用本文示例时应以 wd 为搜索词字段，并在上线前实际测试。

错误三：把 site: 当成 URL 参数

site:example.com 是可以放在搜索词里的查询语法，不等于给表单增加 name="site"。想限定站点时，要构造 wd 的完整值，并确认网站主机名填写正确。

错误四：重复提交多个 wd 字段

同名字段在 URL 中可能形成重复参数，而接收方如何解释重复值不能凭空保证。避免用一个输入框和一个同名隐藏字段同时提交，改为生成唯一的最终查询值，或采用经实测支持的实现方式。

错误五：误以为“搜不到”就是代码坏了

表单负责传递关键词，不负责保证目标页面已经进入百度索引。可以先用常见关键词验证结果页是否打开，再检查站点限定语和页面收录情况。搜索结果数量、排名和更新速度不能由网页表单控制。

错误六：用 POST 或自建接口地址替代结果页地址

本文的简单方案是向百度搜索结果页发送 GET 表单。把地址改成本站路径、改用 POST，或者把参数名称改掉，都意味着改变了接收方式；除非已经实现对应服务端逻辑，否则不会自动获得可用的站内搜索。

错误七：把百度页面嵌入 iframe

结果页表单导航与在 iframe 中嵌入外部页面是两回事。外部页面是否允许被框架加载取决于其安全策略，不能假设百度结果页可稳定嵌入。通常更可靠的做法是让浏览器直接导航到结果页。

十、上线前检查清单

• 表单的 action 是预期的百度搜索结果页地址，协议为 HTTPS。
• 表单使用 GET，关键词字段为 name="wd"。
• 输入框有可见标签；按钮能通过鼠标和键盘提交。
• 若使用站点限定语，最终只有一个预期的 wd 字段，站点主机名填写正确。
• 没有依赖未经官方说明或未经实测的参数来控制结果排序、样式或收录。
• 不会把敏感信息作为搜索词，也不会把用户输入未经安全处理写入本站 HTML。
• 已在真实浏览器中测试中文、空格、空值、键盘提交和目标页面行为。
• 已向使用者说明：搜索结果由百度提供，未收录页面不一定能搜到。

总结来说，给网页添加百度搜索框，核心只是将表单提交到百度搜索结果页，并把关键词放在 wd 字段中。站点限定可以作为搜索词的一部分，但不能保证收录或排序；额外参数也不应在没有可靠依据时当作稳定接口。把职责边界说清楚、用原生表单完成提交，并在部署环境中检查真实请求，通常就能避免大多数实现问题。