使用用户输入创建 HTML URL答案

【问题标题】：HTML URL creation using user input使用用户输入创建 HTML URL
【发布时间】：2021-10-21 22:05:27
【问题描述】：

我在 URL 末尾有一个 URL 为 www.google.com，我需要添加三个用户输入。所以最终到达网址将是 google.com/a+b+c。

    <Html>
    <head>
    <body>
    <label for="ina">Input A:</label><br>
      <input type="text" id="ina" name="ina"><br><br>
    <label for="inb">Input B:</label><br>
      <input type="text" id="inb" name="inb"><br><br>
    <label for="inc">Input C:</label><br>
      <input type="text" id="inc" name="inc"><br><br>
    <a href="https://www.google.com"/input="ina"/input="inb"/input="inc" target="_blank">Submit</a>
    </body>
    </head>
</html>

【问题讨论】：

HTML 无法做到这一点。您需要添加一个表单，该表单提交给处理数据的服务器端程序，然后重定向或在浏览器中执行或多或少相同操作的客户端 JS。
这不是 html 的工作方式……它是静态的。您将需要使用 javascript 来捕获用户点击链接并从您的输入字段中注入值以创建 URL

标签： html url hyperlink

【解决方案1】：

使用 JavaScript：

function submitForm() {
  var a = document.getElementById("ina").value;
  var b = document.getElementById("inb").value;
  var c = document.getElementById("inc").value;
  window.location='https://www.google.com/' + a + "+" + b + "+" + c;
}

<label for="ina">Input A:</label><br>
<input type="text" id="ina" name="ina"><br><br>
<label for="inb">Input B:</label><br>
<input type="text" id="inb" name="inb"><br><br>
<label for="inc">Input C:</label><br>
<input type="text" id="inc" name="inc"><br><br>
<button onclick="submitForm()">Submit</button>

或者使用 Window.open 在新标签/窗口中打开它：

function submitForm() {
  var a = document.getElementById("ina").value;
  var b = document.getElementById("inb").value;
  var c = document.getElementById("inc").value;
  window.open('https://www.google.com/' + a + "+" + b + "+" + c, "_blank");
}

<label for="ina">Input A:</label><br>
<input type="text" id="ina" name="ina"><br><br>
<label for="inb">Input B:</label><br>
<input type="text" id="inb" name="inb"><br><br>
<label for="inc">Input C:</label><br>
<input type="text" id="inc" name="inc"><br><br>
<button onclick="submitForm()">Submit</button>

（Snippet 在 Stack Overflow 中不起作用，因为 sn-ps 中不允许打开新的windwos）

【讨论】：

是的，它的工作原理。太感谢了！ @metropolisCZ