HTML 使用按钮提交表单（HTML）

在本文中，我们将介绍如何在HTML中使用按钮来提交表单。表单是一种用于收集用户输入的常见方式，而按钮则是触发表单提交的关键组件。

阅读更多：HTML 教程

什么是表单？

表单是网页中用于收集用户输入数据的一种元素。它可以包含各种类型的输入字段，例如文本框、复选框、单选按钮和下拉列表等。当用户输入完成后，可以通过提交表单将数据发送到服务器进行处理。

如何创建表单？

创建一个基本的表单很简单。我们需要使用<form>标签来标识表单的开始和结束位置，并在其中添加需要的输入字段和提交按钮。下面是一个简单的例子：

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

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

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

在上面的例子中，我们创建了一个包含两个输入字段（姓名和邮箱）和一个提交按钮的表单。<label>标签用于创建一个与输入字段相关联的标签，使用户能够清晰地了解每个字段的用途。

<input>标签用于创建输入字段，其中的type属性指定了字段的类型，例如text表示文本框，email表示邮箱输入框。id属性用于标识字段，name属性用于在提交表单时标识字段的名称。

<input>标签也可以用于创建提交按钮。type属性设置为submit，value属性用于设置按钮上显示的文本。

如何使用按钮提交表单？

默认情况下，按钮会使用表单的默认提交行为，将表单数据发送到指定的action URL。在上面的例子中，表单将数据提交到名为/submit的URL。

当用户点击提交按钮时，表单中的数据将会被整理成一个HTTP请求发送到服务器。服务器可以通过不同的方法（例如PHP、Node.js）来处理这个请求，并对表单数据进行处理。

为了演示按钮提交表单的效果，我们可以创建一个简单的服务器端代码（使用Node.js）来接收并处理表单数据。下面是一个示例：

const express = require('express');
const app = express();

app.use(express.urlencoded({ extended: false }));

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const email = req.body.email;

  res.send(`您提交的数据为：姓名-{name}，邮箱-{email}`);
});

app.listen(3000, () => {
  console.log('服务器已启动！');
});

上面的代码使用express库来创建一个简单的服务器。当接收到/submit路径的POST请求时，服务器将提取表单数据中的姓名和邮箱，并发送一个包含这些数据的响应。

如何自定义按钮的行为？

有时候，我们可能希望在点击按钮时执行自定义的行为，而不是使用默认的表单提交行为。为了实现这一点，我们可以使用JavaScript来监听按钮点击事件，并在事件发生时执行我们想要的代码。

下面是一个示例，演示如何在表单提交前做一些额外的处理，并阻止默认的提交行为：

<form id="myForm" action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br><br>

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

  <input type="submit" value="提交" onclick="submitForm(event)">
</form>

<script>
  function submitForm(event) {
    event.preventDefault(); // 阻止默认的表单提交行为

    const form = document.getElementById('myForm');
    const name = form.elements.name.value;
    const email = form.elements.email.value;

    // 执行自定义的处理逻辑
    console.log(`姓名：{name}，邮箱：{email}`);

    // 在这里可以使用fetch等方法将数据发送到服务器
  }
</script>