当我们在开发 Web 应用程序时，通常需要在表单中包含链接。例如，我们可能会要求用户在表单中提供其博客或社交媒体页面的链接。本文将介绍如何使用 HTML 和 JavaScript 在表单中提交链接。
HTML 表单
在 HTML 中，我们可以使用 <form> 元素来创建表单。以下是一个简单的表单示例：
<form> <label for="link">请输入链接：</label> <input type="url" id="link" name="link" required> <br> <button type="submit">提交</button> </form>
在这个表单示例中，我们使用了 label 元素和 input 元素来创建一个文本输入框，并指定了输入框的类型为 url。此外，我们还添加了一个 required 属性，以确保用户必须填写此字段才能提交表单。
但是，如果我们直接在文本输入框中输入链接，那么它只会显示为普通的文本字符串，而不是一个可点击的链接。因此，我们需要一种方法来将链接作为可点击的 HTML 元素提交到表单中。
使用 JavaScript 创建表单元素
要将链接作为可点击的 HTML 元素提交到表单中，我们可以使用 JavaScript 动态创建一个新的表单元素。以下是一个示例代码片段：
const linkInput = document.getElementById('link');
const linkUrl = linkInput.value;
const linkAnchor = document.createElement('a');
linkAnchor.href = linkUrl;
linkAnchor.textContent = linkUrl;
document.body.appendChild(linkAnchor);在这个代码片段中，我们首先获取文本输入框的值，并将其存储在 linkUrl 变量中。然后，我们创建一个新的 <a> 元素，并将其链接属性设置为 linkUrl 变量中存储的值。最后，我们将新的元素添加到页面中。
将表单提交到服务器
一旦用户填写了表单并提交了它，我们就需要将表单数据发送到服务器进行处理。以下是一个简单的示例代码：
-- -------------------- ---- -------
----- ---- - -------------------------------
------------------------------- --------------
-------- ------------------- -
-----------------------
----- --------- - --------------------------------
----- ------- - ----------------
----------------------
-
-------- --------------------- -
--------------------- -
------- -------
----- ---------------- ----- ------- ---
-------- - --------------- ------------------ --
--
---------------- -- ----------------
------------ -- ------------------
-------------- -- ----------------------
-在这个代码片段中，我们首先获取表单元素，并使用 addEventListener() 方法将一个事件监听器绑定到 submit 事件上。当用户提交表单时，handleSubmit() 函数将被调用。在这个函数中，我们首先使用 event.preventDefault() 阻止默认的表单提交行为。然后，我们获取输入框的值，并将其传递给 sendFormData() 函数。
sendFormData() 函数使用 fetch() 方法向服务器发送 POST 请求，并将链接数据作为 JSON 格式的请求主体进行发送。在响应中，我们可以使用 .json() 方法访问返回的 JSON 数据。
总结
在本文中，我们介绍了如何在表单中提交带有链接的数据。通过使用 HTML、JavaScript 和 Fetch API，我们可以创建一个可点击的链接元素，并将其作为表单数据提交到服务器进行处理。这对于开发需要收集用户链接的 Web 应用程序非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14559