如何使用 HTML 表单完成 url答案

【问题标题】：How to complete a url using HTML form如何使用 HTML 表单完成 url
【发布时间】：2019-09-11 17:36:51
【问题描述】：

在这一点上，我花了一整天的时间试图弄清楚如何使一个字段以 html 格式完成一个 url。本质上，我想使用相同的 url https://xxx/xxx/xxx/ 然后在最后用 .htm 填写一些表单数据。

我尝试了几种不同的按钮设置，甚至尝试了 java 脚本，但都没有运气。我可以让它转到通用 URL，但我不能让它使用表单数据来完成 URL。

    <!DOCTYPE html>
    <html>
       <head>
          <title>Title of the document</title>
   Flow<input type="text" name="flowname"><br>
  <style>
     .button {
     background-color: #ff9900;
     border: none;
     color: white;
     padding: 15px 25px;
     text-align: center;
     text-decoration: none;
 display: inline-block;
     font-size: 20px;
     margin: 4px 2px;
     cursor: pointer;
     }
  </style>
   </head>
   <body>
     <a href="https://pretendsite.com/pretendfolder/" + 
    document.getElementById("flowname").htm; class="button">Go</a>
    </body>
   </html>

我希望它提取准确的 html 文件，但它只是提取存储位置，忽略输入的任何表单数据。

【问题讨论】：

完整网址示例 - http;//xxx.com/xxx/xxxEnteredtext.htm
您应该使用表单处理程序后端，<form action="formhandler.php"> 或 <input type="submit" formaction="formhandler.php">。
首先您应该了解标记语言的基础知识。进行网络搜索并查看一些有用的网站，例如 w3c school 等。您的示例显示了无效的标记代码。您不应该将输入放入 head 中，并且 JavaScript 作为 html 锚点中的属性将不起作用。
我是编码新手，可能很明显。我今天在 w3c 上花了大概 4 个小时，但他们的例子都没有真正奏效。我尝试使用他们自己尝试工具进行测试的所有内容都在斜杠上添加了特殊字符，并且：我当然不擅长这一点，无法弄清楚原因。
stackoverflow.com/questions/27195868/… 和 stackoverflow.com/questions/133925/…

标签： html forms url button completion

【解决方案1】：

这里有几个问题：

1- 你的<input> 元素不能在文档的头部，它必须在正文中。

2- 您正在调用getElementById("flowname")，而输入没有提供id。

3- 要得到你想要的，你确实需要一些 Javascript。特别是，您需要在输入元素上使用某种事件，即当文本框中发生变化时运行的函数。在这里，我使用了一个oninput 事件，只要用户在输入元素中输入内容就会触发该事件。

<!DOCTYPE html>
    <html>
       <head>
          <title>Title of the document</title>
      </head>
      <body>
          Flow <input type="text" name="flowname" id="flowname"><br>
        <a href="https://pretendsite.com/pretendfolder/" id="link">Go</a>
      </body>
      
      <!-- This is how to include the Javascript code directly to your HTML -->
      <script>
          var input = document.getElementById("flowname");

          //this function gets called whenever the text in the text box changes
          input.oninput = function() {
            var link = document.getElementById("link");
            //here, this.value is the value of the input "flowname"
            link.href = "https://pretendsite.com/pretendfolder/" + this.value;
          }
      </script>
   </html>

编辑： 编辑了代码 sn-p 以显示如何将 Javascript 代码直接插入 HTML 文件。更常见/更好的做法是拥有一个单独的文件，但这是最简单的方法。

【讨论】：

感谢您的建议。到目前为止，我已经尝试了几种不同的方法，但没有运气。开始想也许我不能这样做。在我寻找的时间里，我什至还没有在别人的网站上找到一个有效的例子。我们的 Pega 应用程序中有一项功能可以执行此操作，但需要登录 Pega 才能使用它。
@davidkennedy 这个 sn-p 在我的浏览器上运行良好。如果您认为这篇文章中缺少某些内容，请澄清。
当我尝试使用它时，顶部仅在页面上显示为文本。会不会是我的浏览器不兼容？
@davidkennedy sn-p 的顶部是 Javascript 代码。您应该将它包含在 JS 文件中，或者（更简单地说）包含在 HTML 文档本身的脚本标记中 (<script>[the code here]</script>)
感谢您对此一再提供的帮助。尝试将其添加到 html 代码和之前。两种方式它仍然不会将输入的文本附加到 URL。我根本不了解如何结合 java 和 html。我认为我太笨了，无法完成这项工作。 :(