方法一：使用隐藏输入字段（Hidden Input Field）

这是最简单且无需J*aScript的解决方案。HTML的input元素支持type="hidden"，这种类型的输入字段在页面上不可见，但其name和value属性会在表单提交时作为查询字符串参数一同发送。

实现原理： 通过添加一个type="hidden"的input标签，其name属性设置为我们想要添加的额外参数名（例如tbm），value属性设置为该参数的值（例如isch）。当表单提交时，这个隐藏字段的数据会自动被包含在URL的查询字符串中。

示例代码：

<form action="https://www.google.com/search">
  <input style="border-radius: 10px;" type="text" name="q" placeholder="输入图片搜索关键词">
  <!-- 添加隐藏字段来传递 tbm=isch 参数 -->
  <input type="hidden" name="tbm" value="isch" />
  <input type="submit" value="Google 图片搜索">
</form>

工作方式： 当用户在文本框中输入“cat”并点击提交时，表单将提交到https://www.google.com/search?q=cat&tbm=isch。这里的action属性只需指定基础URL，而q和tbm参数则由各自的input字段提供。

优点：

• 简单易用： 无需编写任何J*aScript代码。
• 兼容性好： 适用于所有支持HTML表单的浏览器。
• 可靠性高： 不依赖客户端脚本执行。

注意事项：

• 此方法适用于需要添加固定参数值的情况。如果参数值需要根据用户行为或其他动态条件改变，则需要考虑J*aScript方案。
• action属性应只包含基础URL，不应包含任何查询字符串参数，以避免冲突。

方法二：使用J*aScript动态构建URL

当需要更复杂的逻辑、动态参数值或在提交前进行额外验证时，J*aScript提供了一种更灵活的解决方案。我们可以拦截表单的提交事件，阻止其默认行为，然后使用J*aScript手动构建完整的URL并进行页面重定向。

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

实现原理：

1. 给表单添加一个ID，以便J*aScript能够选中它。
2. 监听表单的submit事件。
3. 在事件处理函数中，首先调用event.preventDefault()来阻止表单的默认提交行为。
4. 获取用户输入的查询词。
5. 使用模板字符串（Template Literals）或其他字符串拼接方式，构建包含所有必要参数的完整URL。
6. 将window.location设置为这个新构建的URL，从而实现页面重定向。

示例代码：

<form id="imgSearch">
  <input style="border-radius: 10px;" type="text" name="q" placeholder="输入图片搜索关键词">
  <input type="submit" value="Google 图片搜索">
</form>

<script>
document.getElementById("imgSearch").addEventListener("submit", function(e) {
  // 阻止表单的默认提交行为
  e.preventDefault(); 

  // 获取用户输入的查询词，并去除首尾空格
  const q = this.q.value.trim(); 

  // 如果查询词不为空，则构建URL并进行重定向
  if (q) {
    location = `https://www.google.com/search?tbm=isch&q=${encodeURIComponent(q)}`;
  }
});
</script>

工作方式： 当用户在文本框中输入“cat”并点击提交时，J*aScript会拦截此事件。它会获取“cat”，然后构建URL https://www.google.com/search?tbm=isch&q=cat，并使用location对象将浏览器重定向到该URL。

优点：

• 高度灵活： 可以根据需要动态地添加、修改或删除任何查询参数。
• 可控性强： 可以在提交前执行客户端验证或其他逻辑。
• 更清晰的HTML： 表单的action属性可以保持简洁，甚至可以省略。

注意事项：

• 依赖J*aScript： 如果用户的浏览器禁用了J*aScript，此功能将失效。
• URL编码： 在将用户输入的值拼接到URL中时，务必使用encodeURIComponent()函数进行编码，以防止特殊字符破坏URL结构或造成安全问题。
• 用户体验： 相比隐藏字段的直接提交，J*aScript方案可能会有微小的延迟，因为它需要执行脚本。

总结

为HTML表单添加额外的查询字符串参数是常见的开发需求。选择哪种方法取决于你的具体需求：

• 对于固定参数且追求极致简洁的场景，隐藏输入字段是最佳选择，它无需J*aScript，实现简单可靠。
• 对于参数值可能动态变化、需要复杂逻辑或客户端验证的场景，J*aScript动态构建URL提供了更大的灵活性和控制力。

在实际应用中，开发者应根据项目的具体要求和对用户体验的考量，选择最合适的实现方案。无论选择哪种方法，确保URL结构正确且参数值经过适当编码都是至关重要的。