HTML 将表单数据传递到另一个HTML页面

在本文中，我们将介绍如何使用HTML将表单数据传递到另一个HTML页面。通过这种方式，我们可以在一个页面上收集用户输入的数据，并将数据传递给另一个页面进行处理或显示。

阅读更多：HTML 教程

表单基础知识

在深入研究如何传递表单数据之前，我们需要了解一些表单的基本知识。HTML表单使用\

<

form>元素来创建。以下是创建一个基本表单的代码示例：

<form action="#" method="POST">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="提交">
</form>

在上面的代码示例中，我们使用\

<

form>元素创建了一个表单，并指定了数据提交的地址为”#”，即当前页面。 method属性设置为”POST”，表示使用POST方式提交数据。可以通过设置method属性为”GET”来使用GET方式提交数据。

\元素用于向表单添加输入字段。type属性指定输入字段的类型，如”text”表示文本输入，”email”表示电子邮件输入。id属性和name属性是用来标识输入字段的标签和名字。

\元素用于定义与输入字段相关联的标签。for属性指定输入字段的id，从而将标签与输入字段关联。

\元素中的type属性为”submit”的输入字段用于提交表单。

传递表单数据

要将表单数据传递到另一个HTML页面，我们需要使用action属性指定目标页面的URL。我们还可以使用method属性指定提交方法，以及在目标页面中接收和处理表单数据的方式。

以下是一个传递表单数据的例子：

<form action="target.html" method="POST">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>

  <input type="submit" value="提交">
</form>

在上面的代码示例中，表单的action属性被设置为”target.html”，这意味着提交表单时，数据将被发送到名为”target.html”的页面。method属性设置为”POST”，表明使用POST方式提交数据。

如果我们使用GET方法提交数据，可以将method属性设置为”GET”。这将将数据附加到URL的末尾，并在目标页面中通过URL参数接收数据。

在目标页面（target.html）中，我们可以使用JavaScript或服务器端语言（如PHP）来接收和处理表单数据。下面是一个使用JavaScript接收表单数据的例子：

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const name = urlParams.get('name');
  const email = urlParams.get('email');

  console.log(`姓名：{name}`);
  console.log(`邮箱：{email}`);
</script>

在上面的代码示例中，我们使用URLSearchParams对象来解析URL参数。通过get()方法，我们可以获取通过URL传递的表单数据。然后，我们可以通过输出到控制台或在页面上显示来使用这些数据。

总结

在本文中，我们介绍了如何使用HTML将表单数据传递到另一个HTML页面。我们学习了基本的表单结构和属性，并演示了如何在表单中收集用户输入的数据，并将数据传递到另一个页面进行处理。使用正确的提交方法和目标页面，您可以灵活地传递表单数据，并在目标页面上进行进一步的处理和显示。希望本文对您有所帮助！