如何在HTML中将输入框值作为超链接参数传递？

1. 修正你的内联JS实现 #

你的初步思路接近正确，但存在两个关键问题：

• getElementById的参数需要是字符串形式的ID，即'SearchInput'（添加单引号），否则会被当作未定义变量处理。
• 输入值需要用encodeURIComponent()编码，避免空格、&、?这类特殊字符破坏URL结构。

修正后的代码：

<input id="SearchInput" name="SearchInput" type="text" aria-label="Search Input" />
<a href="/search" onclick="this.href = '/search?term=' + encodeURIComponent(document.getElementById('SearchInput').value)">SEARCH</a>

这里将默认href设为/search，确保JS禁用时用户仍能进入搜索页面。

2. 推荐：分离JS的优雅实现 #

内联JS不利于代码维护，推荐把逻辑放到单独的脚本块中：

<input id="SearchInput" name="SearchInput" type="text" aria-label="Search Input" />
<a id="SearchLink" href="/search">SEARCH</a>

<script>
document.getElementById('SearchLink').addEventListener('click', function(e) {
  const inputVal = document.getElementById('SearchInput').value.trim();
  if (inputVal) {
    this.href = `/search?term=${encodeURIComponent(inputVal)}`;
  } else {
    // 输入为空时可阻止跳转或提示用户
    e.preventDefault();
    alert('请输入搜索关键词');
  }
});
</script>

这种方式更易维护，还能添加输入为空的判断逻辑。

3. 语义化最优方案：使用表单 #

搜索功能更推荐用<form>实现，无需JS也能正常工作，同时支持回车提交：

<form action="/search" method="GET">
  <input id="SearchInput" name="term" type="text" aria-label="Search Input" />
  <button type="submit">SEARCH</button>
</form>

直接把输入框的name设为term，表单提交时会自动将输入值作为term参数拼接到URL后，完全不需要JS，兼容性最优。

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