HTML搜索表单提交查询至外部站点无法跳转结果页问题

原生表单提交后仅跳转首页，核心是W3Schools根路径不接收q参数作为搜索查询条件，服务端会将所有带查询参数的根路径请求301重定向到无参首页，无法触发搜索逻辑。

方案1：修正表单提交路径（无JS依赖） #

W3Schools实际处理搜索请求的路径为/search/子路径，将表单action属性修改为对应搜索路径，保留q作为参数名即可正常触发搜索：

<form method="get" action="https://www.w3schools.com/search/" target="_blank">
  <input type="text" name="q" value="" placeholder="输入搜索关键词">
  <input type="submit" value="go">
</form>

该写法完全依赖原生表单能力，无需额外脚本，提交后会自动将输入内容拼接为?q=关键词的查询参数，在新标签页直接加载对应搜索结果。

方案2：JS自定义提交逻辑（适配性更强） #

如果后续站点调整搜索接口规则，可通过JS拦截表单提交行为，自定义地址拼接规则，调整成本更低：

<form id="w3SearchForm" target="_blank">
  <input type="text" id="searchKeyword" name="q" value="" placeholder="输入搜索关键词">
  <input type="submit" value="go">
</form>
<script>
const searchForm = document.getElementById('w3SearchForm');
const keywordInput = document.getElementById('searchKeyword');
searchForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const keyword = encodeURIComponent(keywordInput.value.trim());
  // 若后续搜索接口变更，仅需修改下方地址拼接规则即可
  const targetPath = `https://www.w3schools.com/search/?q=${keyword}`;
  window.open(targetPath, '_blank');
  keywordInput.value = '';
})
</script>

注意：拼接搜索地址时必须用encodeURIComponent处理用户输入的关键词，避免关键词包含空格、&、?等特殊字符时出现地址解析错误。

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