📌  相关文章
📜  在 html 中将谷歌搜索栏添加到我们的网站(1)

📅  最后修改于: 2023-12-03 15:07:40.254000             🧑  作者: Mango

在 HTML 中将谷歌搜索栏添加到我们的网站

想为自己的网站添加一个实用的搜索栏吗？那就试试谷歌搜索栏！在本文中，我们将介绍如何在 HTML 中添加谷歌搜索栏。

在 Google 中创建自己的搜索栏

首先，你需要前往谷歌自定义搜索栏官网创建属于自己的搜索栏。

按照指示填写表单中的相关信息，其中最重要的是搜索栏的名称、描述和搜索结果呈现的网站。

创建成功后，你将获得一个搜索引擎 ID。这个 ID 用于在我们的 HTML 代码中引用搜索栏。

在 HTML 中添加谷歌搜索栏

下面是一段示例代码，展示了如何在 HTML 中嵌入谷歌搜索栏：

<!DOCTYPE html>
<html>
  <head>
    <title>我的网站</title>
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>

    <form method="get" action="https://www.google.com/search">
      <label for="search-bar">搜索：</label>
      <input type="hidden" name="cx" value="搜索引擎ID">
      <input type="text" id="search-bar" name="q">
      <button type="submit">搜索</button>
    </form>
  </body>
</html>

你需要将上面代码中的“搜索引擎ID”替换为你自己的搜索引擎 ID，就可以在你的网站上添加谷歌搜索栏了！

补充说明
  1. 根据官方文档，需要在官网选择中文来进行产品的创建，具体操作如下图所示：

1

2

3

  1. 如果你想在你的网站上限定搜索结果的范围，可以在创建搜索栏时添加网站限制。不过这需要付费才能享受。

  2. 在本文提供的代码中，我们将搜索栏放入了一个表单元素中。用户输入搜索内容后，可以通过表单的提交按钮来触发搜索操作。搜索结果将呈现在谷歌搜索页面上。

参考资料