谷歌搜索按钮仅跳转通用页面，如何实现输入内容的精准搜索？

我已将谷歌搜索按钮设置为可点击状态，但点击后仅跳转至谷歌通用页面，请问如何修改代码，使按钮能够搜索输入框中输入的任意内容？

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <title>Search</title>
  </head>
  <body>
    <div class="header">
      <div class="header-right">
        <a href="./advanced.html">Advanced Search</a>
        <a href="./images.html">Images</a>
      </div>
    </div>    
    <div class="mainBody">
      <img
        src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
        alt="google img"
      />
        <div class="search">
        <div class="search-input">
          <span class="material-icons"> search </span>
            <form action="https://google.com/search">
            <input type="text" name="q" autofocus>
        <span class="material-icons"> mic </span>
        </form>
        </div>
        <div class="search-buttons">
          <button type="submit" name="q" onclick='location.href="https://google.com/search?q="'>Google Search</button>
        </div>
      </div>
    </body>
</html>

问题根源有两个：一是提交按钮不在表单标签内部，无法触发表单的原生提交逻辑；二是onclick事件硬编码了固定URL，没有获取输入框的动态内容。

方案一：利用原生表单提交（推荐） #

把按钮移到<form>标签内部，移除多余的onclick和name="q"属性，让浏览器自动处理参数拼接：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <title>Search</title>
  </head>
  <body>
    <div class="header">
      <div class="header-right">
        <a href="./advanced.html">Advanced Search</a>
        <a href="./images.html">Images</a>
      </div>
    </div>    
    <div class="mainBody">
      <img
        src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
        alt="google img"
      />
        <div class="search">
        <div class="search-input">
          <span class="material-icons"> search </span>
            <form action="https://google.com/search">
            <input type="text" name="q" autofocus>
        <span class="material-icons"> mic </span>
        <!-- 将按钮移入form内部 -->
        <div class="search-buttons">
          <button type="submit">Google Search</button>
        </div>
        </form>
        </div>
      </div>
    </body>
</html>

原理：表单的action已指定谷歌搜索地址，输入框的name="q"是谷歌搜索接口要求的参数名。点击type="submit"按钮时，浏览器会自动将输入框内容以q=输入内容的格式拼接到URL后，完成搜索跳转。

方案二：通过JavaScript动态拼接URL（适合需保留按钮位置的场景） #

如果因布局需求不能移动按钮位置，可修改onclick逻辑，手动获取输入框内容并构建合法URL：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <title>Search</title>
  </head>
  <body>
    <div class="header">
      <div class="header-right">
        <a href="./advanced.html">Advanced Search</a>
        <a href="./images.html">Images</a>
      </div>
    </div>    
    <div class="mainBody">
      <img
        src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
        alt="google img"
      />
        <div class="search">
        <div class="search-input">
          <span class="material-icons"> search </span>
            <form action="https://google.com/search">
            <input type="text" name="q" autofocus>
        <span class="material-icons"> mic </span>
        </form>
        </div>
        <div class="search-buttons">
          <button type="button" onclick="handleSearch()">Google Search</button>
        </div>
      </div>
    </div>
    <script>
      function handleSearch() {
        const query = document.querySelector('input[name="q"]').value.trim();
        if (query) {
          // 用encodeURIComponent处理特殊字符，避免URL错误
          location.href = `https://google.com/search?q=${encodeURIComponent(query)}`;
        }
      }
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者triplikeido